Turning side projects into a side project

About two months ago, Nitin Sampathi and I started working on a side project to end all side projects. Housing all of our side projects under one roof — in it’s own side project. We made a side project out of our many side projects. A side project about side projects. Confused yet?

Introducing Pixels In Progress

Pixels in Progress is a shared, collaborative portfolio of sorts — where we can come together as one unit and learn to build digital products of our own. We’ll be experimenting with new design processes, new technologies, and sharing everything (well, as much as we can) along the way.

How it started

By day, we’re passionate product designers looking to make an impact. And up until now, for the most part, our work has strictly stayed in the realm of design. We have researched many problems, ideated through many solutions, and visualized those solutions through prototypes and high-fidelity comps. However, that was usually the finish line. Our designs would either be handed off to a team of developers, or float away into some enigmatic backlog never to be heard from again.

So, we’re changing that. We’re learning to code and figuring out how to build (and ship!) the services, apps, or websites we’ve always “just” designed — all on our own. The plan is to go from pushing pixels to building products, and hopefully by the end of all of this we have something to give back to the design community that has already been tremendously gracious to us.

Our first project

For our first project, we decided to build a simple weather app that displays temperature, a short description of the forecast, and an image from Unsplash. The app was built using React on the front-end and Express (Node) on the back-end, all deployed to Heroku. Make sure to check out Nitin’s article, A simple weather app with React for a deeper dive into the code and learn how to build one yourself in no time at all.

How we learned

We were itching to get the ball rolling on both the weather app and the portfolio site, so we valued speed and breaking things over a slower and more intentional process. This will certainly change and be refined over time as we get better at development, but for now it was what needed to happen. Using a combination of online courses, tutorials, and video content — we were able to get a fully functioning app up and running in ~a month.

Lynda

From the start, we knew we wanted to build the app using JavaScript. We already had some familiarity with it from our daily work and thought it would be a good jumping off point. We turned to the JavaScript Essential Training course on Lynda.

At about 5 hours, this course provided a superb crash course into the world of JS development. The introductory videos are great for complete beginners, however, we skipped through them as we were already familiar with many of the programming concepts being introduced. The course integrates two or three real world projects into the work flow, making the whole experience a lot more practical.

From there, we moved into the React.js Essential Training to dip our toes into one of the hottest front-end frameworks around. Things started off strong, however, the course proved to be a bit too dense as we made it further. The examples were harder to follow (React has a unique way of doing things), and the course itself felt disorganized. Some project files weren’t accurate and/or missing altogether. It was a great introduction, but we decided it would be best to move on to something different.

Codecademy

After shopping around for a bit, we decided on Learn ReactJS through Codecademy. We looked at other competitors like Treehouse, but we favored the freemium model offered by Codecademy and found the (new) course structure to fit our skill level perfectly. The course itself was succinct and easy to follow. The built-in code editor and rendering engine made it much easier to learn concepts on the fly without having to worry about setting up or managing our own development environment.

And because the course is entirely text based with no lengthy videos, it made it really easy to go back and grab some code when we hit a wall with the weather app. We used Part I and Part II many times throughout the first project to help us fully understand the weirdness that is React.

Tutorials

With a better understanding of JS and a slight grasp on React, we searched the depths of the interwebs in tandem with our Codecademy course to give us a practical example to strive for. We wanted to try and “get” this on our own, so we were hesitant to follow any one particular tutorial through to completion, but we did find a variety of guides that proved to be a helpful resource throughout the project.

DevTips

Lastly, we wanted to give a big shout out to the React JS prototyping series from DevTips. This series was a fun introduction into prototyping with React using third party API integrations. The series is set up with two participants –one acting as a mentor with a high familiarity with React, the other as a mentee with only a basic understanding. The course was easy to follow, extremely relatable, and most importantly — fun!

Recap

Overall, we’re happy with how the first project shook out. We learned quite a lot in only a month — and that feels really good, because that’s the whole reason we’re doing this. We might tie up some loose ends with the app and add a layer of polish in the interim, but for the most part we have our eyes set on our second project. We’re sticking with the same tech stack for now so we can refine our process and evolve our understanding even further.

Next steps

We don’t have a release schedule set in stone at this time, we’re shooting for more of a “when it’s done” sort of vibe. If you enjoyed what you read and are interested in following along, be sure to head over to Pixels in Progress and subscribe to our mailing list. We’ll be sending out monthly updates on where the newest projects stands, what we’re learning, and anything else on our minds. No spam, we promise.