How to get started with building side projects as a developer?
Getting started is the toughest, but with good planning, you can probably feel good and excited about working on your new side project.
TL;DR Just go and build. Consider it your small startup and plan it well.
When it comes to learning how to code, I believe the best way to go about it is to build a ton of projects. Projects can be considered a cheat code for speeding up your learning process 10x. I know it sounds crazy to beginners, how will I ever be able to learn new stuff when I literally am building with the existing knowledge I have on a subject. (for the sake of this blog I will keep web development as the main focus, but these rules mostly apply to every other use case) but in my short experience, this way has worked out for me really well.
So how does it help?
Building a web project is a lot more than just using your knowledge to display something on the web, it has a lot of tiny aspects to it that make this process a lot more important than you think. Simply copying code while watching a tutorial on YouTube sometimes work, but the next time you do something similar you will have to go and watch that video again, however, if you are facing some problem while building your project and you solve it after hours of debugging on stack overflow, I am sure that the next time, you won't even need to google it :) If you go about building a project in a systematic approach that focuses on learning why you are doing something instead of doing something, it will make the process very very valuable.
When you follow a series of steps that I will list down below, you will force your brain to think about building your side project as hard as you might think while launching a startup, this is required so that you question each step of your journey and understand each and every decision you took even if it is as simple as changing the name of a class in CSS.
With the hope that you now have faith in me and the process, let's see how to actually go about doing this.
Get me started!
So here are some steps that I recommend every beginner to follow, that will help tackle the excuses you give to yourself for not building something.
Step 1 - Find an Idea
This is the hardest and the most overthought step of building a side project. I have suffered the issue of overthinking my project ideas so much that I didn't build anything other than what I had to in my internships or some hackathons and this caused a scarcity of personal projects in my portfolio. I decided to tackle this issue by scouring the internet for all the project ideas I could find, I downloaded some E-Books as well, and realized that projects don't need to be complex or world-changing, rather they mostly need to be something dead simple, something that has already been made, or something that challenges you to learn a lot of new stuff and when you have this notion in your mind while looking for ideas, tons of ideas pop up right in your mind, an E-commerce platform, a personal blog, a Facebook clone, or it can be even as small as only a comments component for a video, or a carousel design, or it can be as creative as building your own component library, building a social media just for penguins, an NFT collection for boomers. Some more ideas that you can try and build
- A music playing website like Spotify (add a featured section, and recommended section with an actual recommender system and it becomes a lot more complex). To make it more complex and increase the difficulty a bit
- Add comments and reviews.
- Add a sleep timer to it.
- Make the songs fade after one song ends.
- An e-commerce platform just to sell equipment specific to horse owners (yes horse not house), like things that horses wear over them while riding (I don't know it's new for me too!)
- A bookstore with features like sharing and leaving your reviews.
- Clones of Gmail, Youtube, Instagram, Twitter, Reddit, HashNode. If you wanna go crazy then clones of apps like Postman, or VSCode, etc.
If you want more ideas or some help to get started check out this Notion page I made for myself when I thought of doing #15days15projects but it happened only for 5 days (F). Notion Page with my Personal project ideas
Now. Hoping that you have at least one idea that you think is good for you to start building, let's move on to step 2.
Also remember - Don't overthink it, just choose any idea and start, no one is paying you for it.
Step 2 - Plan
Now you might be tempted to think that you are building a to-do list app, why will you ever need to plan how to make that? But trust me, planning is the best way to get yourself through the 9¾ platform, or into the magical world of feeling good about the project.
Planning is a tough task, but one of the most important if you wanna make sure you get the most out of this process of building. Planning also varies from person to person, project to project, so I will try my best to deliver the essence of this step to you and hope that you will add your own magic to make it perfect :)
Start with a blank Notion page, Roam entry, or a new page in your notebook, and think hard about what you are going to build. One of the reasons for me choosing some really weird ideas and adding them to the list above was particularly this. Making sure you spend enough time thinking about the project before diving into the code. Do your research. Think about why do horses need an e-commerce store, or why do penguins need a social media app, or why do NFTs exist, and then note down everything you learn. Write it down in a raw format, no need to keep it especially beautiful or to make it look really pretty, your main focus right now is to write down everything that you research and put it down somewhere. For a to-do list, write down what will make you use that app instead of others, write down the things you notice about the best to-do list apps in the market right now, watch tutorials on how to make a to-do list app and write down the common things in each and every tutorial (tip - watch them in 2x)
After doing all this now is the time to actually note down the most important aspects of building this project, and ill break it down into some really important things needed for the same.
Features
This is the first out of the 1000s of lists you will be making in this process, break down your app into tons of features, assume that you needed to explain what your project does in just these points. Start with the most basic features, the one without which you can't possibly call this project complete (and keep them as low as possible - so that you can get the basic version out fast) then work upon the somewhat needed but can do without features of the project and after that some good-to-haves and then finally the most hardcore ones that probably no one had thought of before.
After you have this list, stare at it for some time, and then edit it again.
Now when you have the final_final list with you, highlight the basic features and see if you can build them without any help. This brings me to the next point.
Requirements or Knowledge needed
This step focuses on what you know and what you require to get this project to actually finish. Look at the basic features and sort them in the order of hardness according to your own rating system, don't worry about it being actually hard or not, but this will give you a good idea about what are the things you will be needing to get this done.
After that write down all the technical libraries, frameworks, tools, etc. you will be needing to build this. For example for a blog, you need a frontend framework (like react) or HTML, a backend (like NodeJs), a database provider, a design, a tool to test out the APIs (postman), and so on. After doing this, see how many of these are you confident in and what new things will you need to learn while building this project.
Let us consider that you need to learn some stuff for this, so let's go to my next point.
Prepare
Suppose your project requires the usage of NodeJs but you haven't really played around with backend frameworks before, or are really new to this, go and watch some tutorials on it, make sure you thoroughly read the documentation, understand the use case, the need, and understanding the basic principles.
Remember the aim is to be able to bootstrap this project from what you learned, and not to be the best NodeJs developer ever.
After spending some time learning the basics of what all you will be needing, in theory, you are now ready to get started with actually building this project, but trust me this is almost never the case, yes, you are ready to build this, but the learning doesn't stop at this stage. Once you start building there will be a set of problems that discourage you from building or some problems that you might not have thought of while learning how to use a particular technology, DO NOT PANIC. This is normal and happens with 100% of devs and all the time, even if they are the senior engineers.
So buckle up, and let's get ready for the next step.
My Implementation
Here is how I handled the planning step for my Social Media app for penguins
I will also link the full notion doc at the end of the page, so if you want you can refer that directly.
- Research
I did quite some research on penguins to understand what can be there in the social media app and also how to name the app.
- Features
I tried to note down some very minimal features required for this social media app, you can get ideas for features by going over some already existing apps in this space and some opensource projects in Github.
- Requirements
This might be hard for a beginner, to understand what technology would be required to help build these projects, in cases like these I would highly recommend using your pre-existing knowledge on this topic, or see some tutorials for similar projects and understand what they are using, read some blogs, or ask a mentor for help. Folks on Twitter are very helpful!
Here is how I managed my requirements and added some extra points as well.
Step 3 - Design
This is often the most overlooked aspect of building a project, whether it's designing the UI or designing your database models, this is very important. After you are done with the planning stage of the project, you have to now think about designing how you will build this project. Take a pen and paper or take out your IPad (I prefer this) and start drawing. Even if you are the worst artist in the world, try and build a really sketchy sketch of what you think your application should look like, just draw some squares and circles and let your mind flow, it will automatically at one point make something that actually feels not so bad. This process will be irritating, in fact, the whole design step can be very irritating, nothing might seem good, but don't give up, it doesn't matter if you aren't a designer, you do know what looks really bad and what looks moderately ok. And if you are a designer make it FANCY.
Now assuming 230123 sketches later you finally figured out what you want it to look like, go ahead and open up Figma and make a version of this that you can actually build up. For database designs or something else, choose the software needed and get it digital or make it more formal and absolute. If you don't know how to use Figma, learn it. Especially if you are a frontend developer, will save you hours of doing random CSS styles.
Once you are happy with the results, move on to the next step.
My Implementation
UI DESIGN
Here are some sketches I made for the basic look and feel of the project, I know it looks really bad, but my aim here is to convey the message
DATABASE DESIGN
Now I am not an expert at this but I tried to lay down how we can model really basic databases for our projects, this is in no way the best or the professional way to do things but this will still be really helpful for you to understand the basics and get ou started with some well-thought models.
You can also view some YouTube tutorials or watch some live streamers design their own databases to get a good idea of how it is done.
Here is a live streamer that I really enjoy - Coding Garden with Cj
Step 4 - Prepare
This is a fairly small step but an important one nonetheless. Prepare for the next step i.e. actual building. You need to sure you have all the things checked, and ready with you. You know the basics of what you need to build this, you have an idea of how it will look, you have an idea of why you are making this and you appreciate penguins a lot more now.
After all, this, prepare for writing the code, this involves a small step similar to planning the features for your app, however now you will be thinking in terms of code. Make a list of all the modules/components your app requires. Break down the project into small modules (that might be the same as features) and write down what each one of them would require and return (essentially like a function or props in react). See how each module interacts with one another and how do you structure them in the best way possible (but again don't overthink it, you are not getting paid). With a small plan on how to structure your project and writing modular code, you are finally prepared for building it.
My Implementation
Now, this step might vary a lot depending on the person who is planning and also based on the level of experience, but I would still try and show how I am splitting this project into different modules based on what I think can be the right way to approach it. However, the main thing you need to need to keep in your mind is that you need to group together the similar or shared components, so in this case, as the post component might be shared in both Profile and the Feed I have kept it seperate.
Step 5 - BUILD
All of the steps above might seem too much and can be honestly skipped as well, ( I have skipped many times) but they were all just to prepare you in the best way possible for this step, to make sure you get the most out of this process of building your now beloved startup (after spending so many research hours on the idea, if you don't start thinking of it as your startup, then something is wrong with you :/ )
Open your favorite editor, set up your workspace, and get started to code.
After 5 mins, open up chrome and go to StackOverflow for the first bug in your project! This is the most joyful moment for me now (and irritating of course) as now I know that I am entirely invested in building this and am doing an effort into learning how to solve some bugs. This takes me back to thinking how I would have opened up StackOverflow within 1 minute of starting the project but now it has gone to 5 minutes :)
After several bug fixes and head scratches, you will have something you are proud of at the end of day 1. Maybe it's just one module or just one feature, but you built something, and it's time to feel good about yourself again. Now go back to solving penguin problems.
After hours/days/months I hope you will finally build the basic set of features that you listed as required for this project to work.
git commit -m "Completed V1, finally yay!"
End your day with this special message and boast about it to everyone you know. You ought to be happy this was your project, you built it, you have one more stamp on your cv declaring that you are a much better developer now!
Step 6 - Introspect
After you are done boasting around, and feeling good about this project, take a step back and note down everything new that you learned in this process. Note down all the mistakes you made, all the topics you had to revisit, and all the bugs you solved. Think about how you can improve this project to take it to v2. How can you integrate the ultra-cool features and how can you make this project more and more advanced. If you still love this project, go ahead and start again with the next set of things you need to accomplish in this project to make it better.
This step is really important as it will make you realize the importance of what you just did, I did 5 projects in 5 days and my first project was a todo list, even though I had been developing react applications for the past 1 year, I really appreciated doing this project as it helped me revise and focus on core JS and HTML principles after a long time, I then built a typing speed testing website which taught me a lot about event handling and propagation, and how to improve performance in such cases. In my next small app of building a shared whiteboard, I learned about WebSockets and how they work, I learned how to add canvas to HTML and make some great projects.
My Implementation
Here are some good questions that I think might be good for introspecting on what you gained from this project.
If you, like me, also benefited from your projects make sure to remember me and pray to god for sending me one less bug in my next project :p . Also, like this article, and share it every time you complete a project!
Bonus Content
Notion Link
https://www.notion.so/kushdaga/Social-Media-for-Penguins-ec3047c8a2054c7c80f4bef82ea76fe9
Here are some screenshots of how I am approaching building my new side project with a really close friend of mine.
Thanks a lot for spending your time reading through all that I wrote, and also reaching the end. Here is a heart for you ❤️. Also feel free to contact me on Twitter !
This was my first blog on hashnode, so bear with my awfully long explanations and maybe too much planning for a very simple task, you are free to follow whichever method suits you, but if you have something defined, you might actually end up doing it. Thank You!
Photo by HalGatewood.com on Unsplash