by Brett Stevens

How I went from no coding experience to launching my first product

A year ago, I had no real coding experience. Now I work with a team of developers, making almost daily commits and working primarily in Javascript and React.

And today, our team is launching our first product, Code Time for VS Code.

Getting started on freeCodeCamp

Before I found freeCodeCamp, I was a complete coding novice. As an undergrad, I learned some basic Python and used MATLAB in my mechanical engineering classes, most of which I had forgotten.

Then I discovered freeCodeCamp on Medium. I started with some of the coding challenges, which taught me the basics of how to code with just enough structure that I could complement with my own practice and exploration outside of the curriculum.

Before learning how to code, I also taught myself how to design user interfaces in Sketch, which helped me understand many of the concepts involved in front-end development. As I worked through the challenges, I kept thinking about products I could both design and code.

Running into a product idea

I’ve always loved running — not only for the exercise, but also because I often feel the most focused and creative after a long run.

After one of my routine runs through Golden Gate Park, I opened up the Strava app on my phone and checked my time, distance, and pace, as I always do. And then an idea hit me.

Why didn’t I have an app that tracked my progress as I was coding?

Checking my stats after a long run is both fun and rewarding. Besides tracking my running with Strava, I also track my sleep with Fitbit and my finances with Mint.

But when it came to coding, I couldn’t find an app that gave me that same sense of reward after a long, focused session.

I also wanted to see the data behind my journey to becoming a more skilled developer. How much time was I coding per week? When did I usually focus best during the day? Was I becoming more efficient as I coded? How long would it take me to learn a new framework or language, like React?

I’m a believer in the quantified self movement — that you can learn from data and make decisions that lead to improvements in your daily life.

While I had hypotheses about the habits that made me happier and more productive, I couldn’t see the actual data. How do sleep and coffee affect my ability to focus throughout the day? Does running give me a creative coding boost, like coffee?

Source: Wall Street Journal

We all have beliefs about the factors that drive our behaviors and outcomes, but they may or may not be correct. We have an incredible number of biases that color our understanding, such as confirmation bias and sample set bias.

I looked for answers, but I couldn’t find any real solutions.

That’s how we came up with the idea for Code Time, a plugin that automatically generates time and project reports for developers. And the idea was compelling enough for us to get some seed funding from investors, including David Cheriton, a Stanford computer science professor and a legend in Silicon Valley.

Our team uses VS Code, so our first product launch is Code Time for VS Code.

Code Time extension for VS Code

From code to flow time

When I started out on freeCodeCamp, I learned most effectively when I had long spans of uninterrupted time — usually late at night and on weekends.

Distractions were particularly destructive to progress. And once I started working with a team of developers, I realized how much damage a simple interruption could make to a coding session.

Have you ever been deep in thought, thinking through a complex problem after spending a bunch of time on research, only to get interrupted right when you start coding?

Source: Jason Heeris

There’s also a great scene in The Social Network where Sean Parker tries to introduce himself to one of Facebook’s developers, only to be rejected and told by Mark Zuckerberg, “Oh, he’s wired in.”

Development is a delicate, logical, and painstaking craft. Slack messages, Facebook notifications, and sometimes meetings — what we like to call the “enemies of flow” — break attention and focus.

Perhaps you stumbled upon this great Reddit post before:

Source: Reddit

When we built Code Time, we hypothesized that data can help developers find their flow and block out interruptions during their most productive hours of the day. Our team believes that understanding flow and natural focus times is one of the keys to coding smarter, not harder.

Using data from our Code Time plugin, for instance, we built a simple heatmap that helps you visualize your flow by showing you your average coding activity by hour of the day.

We also follow “Code First” as a principle — we don’t schedule meetings that interrupt someone else’s flow. We aim to defragment our calendars by scheduling meetings right before and after lunch.

The fastest way to become a developer? Build a product!

After I learned the basics of coding on freeCodeCamp and came up with a product idea, I started to work with a team of developers to bring the idea to life.

Luckily, I get to work with a number of highly talented, senior developers. I learn by reading their code after tasks are completed, asking for feedback on my own code, and observing how they make code design and architecture decisions.

With their guidance and mentorship, I went from making small changes to our web app’s CSS to building my own data visualizations using Nivo’s React chart library and Material UI.

As we’ve progressed, our product ideas have evolved tremendously. For instance, one of my teammates (Xavier, who built all of our code editor plugins), had the idea to capture top songs for coding by integrating with Spotify and iTunes. (We generated a Top 40 playlist, which you can follow here).

It’s ironic, but I’ve taught myself how to code with freeCodeCamp and by building a product for developers.

freeCodeCamp taught me the basics, giving me the footing I needed to feel confident that I could progress as a developer. The challenges allowed me to establish a framework for web development that I could build upon as I tackled projects of my own.

While there’s no substitute for time and experience, freeCodeCamp helped me take the first step.

Sometimes, the most difficult part of the journey is just getting started.

Our team just launched Code Time on Product Hunt… check it out! And if you like it, help us by upvoting!