Chris Blakely

Posted on Jul 24, 2019 • Edited on Nov 14, 2019 • Originally published at chrisblakely.dev

Here's how to build your own projects from scratch

#beginners #career #codenewbie #javascript

There are many great tutorials that walk you through creating apps, from simple todo lists to fully working web apps. But how do you start your own projects from scratch? Without the safety net of a tutorial, you might feel a bit lost on what to build, or even how to get started.

These are the steps I followed that helped me create my own projects when I was a junior developer - and also set me up with the skills I needed to become a software team lead. But first...

Why build my own projects when I can follow tutorials?

Good question, curious reader!
Tutorials are great up to a point, but creating your own projects gives soo many other benefits:

It makes you think

When sitting down and starting your own project, there are many thing's to think about.

• How do I start?
• What will it look like?
• What technologies do I need?

And other stuff like that (we'll talk about how to get started in a minute). This is exactly what your job as a developer will entail - designing a solution and seeing it through to the finish. Creating your own projects allows you to practice these skills, and will set you up for the start of your career.

You'll encounter problems you never knew existed

Often when following a tutorial, you are exposed to the happy path - which is basically;

"OK we're building a thing, here are the steps to get the thing working, it works! Hurray! The End"

Which is great if you're learning a new technology - plus it would be a pretty terrible tutorial if the thing you are building didn't work at the end.

Unfortunately, the lives of web developer's are not as straight forward as this. When you're writing code, you will hit issues at some point. Plain and simple.

By creating your own projects, you'll encounter problems naturally and it gives you a chance to practice overcoming them. This what developers do every day and practicing will make this a lot easier.

It's fun & you'll always learn something

We’re a lucky bunch, us developers. We can sit down to a laptop, and build whatever we want, using whatever technology we want. We can also do it more or less for free. I doubt Bill the Aerospace engineer would get a good response from his boss if he asked, “to borrow that Boeing 747 for the weekend because he wants to try out a new jet engine he made at home”.

It’s fun to build your own projects. Something you can use, show off to friends and family, or learn from. And it’s a pretty safe hobby. It might work, it might not. You might like it, you might f*** the whole thing up. But it’s not a big deal, just throw the project files in the virtual trashcan and start again. Easy!

On to the good stuff...

Ok! Now we're happy that creating our own project's is a great way to learn and have fun. Let's look at how to get started creating your very own projects.

Expand on your tutorial projects

There is something intimidating about starting a brand new piece of work. You'll sit down to a new file, and think, "what do I do first?". The nicer way to start building your own projects is to build upon your existing tutorial apps and coding exercises. This gives you a bit of a head start, as opposed to starting from a blank slate.

So, if you have completed a todo app tutorial (if you haven't, where have you been?!), you could build upon it in whatever way you want. For example, you could:

• Allow saving the todo list (to a database, localStorage etc) so the user can come back it later
• Give the user some customisation options (change the color of todo items)
• Add login ability

You get the idea — basically, use your imagination! The possibilities are endless, so throw caution to the wind and build whatever you feel like!

Build stuff you'll use

Everyone has their own ideas for a web app. Use your newly found web development skills to build your own! Write down some ideas for an app that you've had over the years, specifically those that you would actually use. It doesn't have to be an overly complex app, and can be as simple as a todo list.

By creating an app that you’ll use, it’ll keep you interested enough to see the project through to completion. Also, by using the app once it’s finished, you’ll naturally find ways to make it better, which gives you another project to complete— and the circle of (coding) life repeats!

Another similar approach, is to replicate a popular app that you use. You don't have to go into the same level of detail as the app you are replicating, but see if you can get the basic functionality working. For example:

• Use the GitHub API to create your own GitHub dashboard
• Use the Twitter API and make your own Twitter feed
• A web app that allows you to manage your budget

Start small

A sure-fire way to get overwhelmed when starting your own projects is to go all out and try to create massive projects. While the ambition is good, you might find yourself getting stuck and frustrated at your progress.

Start small for your first few projects. Instead of making a fully-fledged scientific calculator, create a basic one that does simple additions and subtractions, for example. Then as you become more comfortable, add new features. Before you know it, your small project will have turned into a fully-fledged app.

This also gives you the added benefit of practicing how software is built in the real world. Small features will often be developed, tested, and deployed in increments. This is typically called Agile Development (I won't go into that here).

Have a goal in mind

There is a popular quote by Leonardo da Vinci:

Art is never finished, only abandoned.

The same can be said for software. Once you've started your own project, it can often be difficult to know when to keep going, and when to stop and move onto the next one. If you start with a goal in mind, it will give you something to aim for, as opposed to feeling like you are aimlessly wandering the desert.

So what do I mean by a goal? A goal in this sense is basically what you want to achieve with your project.

Instead of simply aiming to build a GitHub dashboard you could say:

"I am going to build a dashboard that shows how many commits I've made to my own repositories last month ".

This gives you a clear direction in which to work. Once you have reached that goal, you could add more features, or move onto another project. A goal can be anything you want:

• "I want to learn how to write clean code"
• "I want to learn CSS Grid"
• "I want to be able to call an API using React"
• "I want to learn how to write tests in Python"

BONUS TIP - remember to put everything onto your own GitHub repository, and state the goal in the description (you should put projects on your CV/Resume as well!).

This will show employers that you are passionate about learning, and will also be good motivation for yourself when you look back on old projects!

Example projects to try

Here are some example projects to get your creative flow going.

(Quick note: I will be creating these projects myself, along with articles on how I did each one, how/why I made the decisions I made and my general thought process. As well as completed code, of course. Make sure to subscribe to my blog to get updated when these articles are available!)

Calculator web app

Create a calculator that allows the user to perform basic operations: add, subtract, multiply & divide. When you have got that far, you can build upon it:

• Add more scientific calculations (modulus etc)
• Improve the UI (HINT: CSS Grid will be your friend here)
• Create "undo" functionality (HINT: the react tutorial has a good example of this)

GitHub dashboard

Use the GitHub API to create your own dashboard. This dashboard can be anything you want. A possible starting point would be to display information about your own GitHub account.

• Total commits over the past month
• Total number of repositories
• Displays your most used/favourite language

HINT: Even though this is a client-side project, you will have to interact with an API. Use Postman or similar to get a feel for how the API works, how to authenticate requests and things like that.

A Quiz app

Create a quiz app that randomly displays a question with a multiple choice of answers to the user. If the user gets the answer correct, display a "hurray!" message, update their score, you get the idea. I like this app as the possibilities are endless when it comes to expanding on it:

• Add categories
• Add high scores
• Add a countdown
• Allow multiple players (HINT: You could go really advanced and use Socket.io to allow online play!)

HINT: Remember not to go overboard at the beginning! Set your goal for the initial project, and get to that point first. Then, see if you want to add more stuff or move onto something else.

A Real Time weather app

Use something like Open Weather Map to create an app that displays the latest weather for a certain location in real-time.

HINT: Try not to be put off by the term real-time. At it's simplest level, this could be writing some logic that calls the API every 5 seconds and displays the data.

A shopping cart

We all know how shopping cart's work, but can you build one? Display a list of products to the user, and let them add it to their cart. As a starting point, you could create functionality that:

• Let's the user add an item from the product page to their cart
• Shows the items in the cart
• Shows the total cost of the items in the cart

HINT - You can simply hardcode the products that appear on the product's page as a first step to get going.
More projects!

If you're looking to get your hands on more projects, check out this GitHub repo. There are projects for different levels that will keep you busy for a while!

Thanks for reading!

To get the latest tips and guides for junior developers straight to your inbox, make sure to join the mailing list at www.chrisblakely.dev!