I love building side projects (without tutorials) in short periods so mapping out the project is crucial for success. I want to share my thoughts to help you build yours.
Start with the WHY
I can’t stress enough to find an idea that your passionate about or that directly benefits someone close to you (aka stakeholders). It gives you an incentive to finish. Take a moment to write down the goal of the project.
Throughout this article, I will be using my current side project as an example. Level Up Dev is an app that helps developers visually track their technical skills and career progression. My goal is to plan my career better and share it with several mentees.
Use the napkin/notepad technique for the initial design of the idea.
Create a wireframe with pen and paper first. The pen and paper part doesn't have to be perfect. You're basically sketching your idea out. I aim for a minimum of two different wireframe patterns (no colors, no deep details) focused on data flow, information design, and user flow. Don't be afraid to throw the sketch away. At most, spend one day on the napkin/notepad. The main goal is to determine which imperfect design you like most.
Follow-up with a digital design tool (like Figma)
Afterward, I spend several days using a digital tool like Figma to iterate the design. This is where the mapping starts. Begin with no colors (just shades of gray), dummy data, and focus on user flow. I have a UI design for each page, component, and user phase. For images, I use a generic one-size-fits-all box. Spend at least a day and no more than three days on planning. Think of the goal and stakeholders.
End the design phase by adding colors based on information hierarchy and branding. Find and add images you will be using.
Seek a design critique and idea feedback early in the process.
Talk about your idea. If this is a portfolio project, it's important that you can explain the why behind the side project and the intended results.
Build/learn in public. Imagine how awesome it is to have others invested in your success and helping with bugs because they watched the idea from the start. A great example of this is daily posting on Twitter's #100DaysOfCode or to a discord/Slack channel.
Be forward thinking
Take a moment to name each page and component. I use Notion (a digital tool), but anything works. As I finish each section, I write out a generic high-level API, database schema, and other backend items needed to support it. Consider resources like the database type, what's the best place to host this type of app, and will the user be inputting data or just reading content.
I encourage you to utilize a digital document to help with planning. I use Notion to list the order of building the side project's feature. As I develop a feature, I scratch out that item. I love love watching that list shrink over time. I like Notion as I can have a section dedicated to each item (uploaded images, notes on data schema & API, user flow, uploaded images, etc.)
The entire project mapping phase, just a few days, ends with a visual collection of mockups for the UI page, designs for data and backend stuff, resources to find, key deployment decisions made, and a list of colors/images.
Build and commit to GitHub regularly.
I promise you; it will save lots of headaches. Even a small lapse in consistent development can doom completing the project. A great tip is to continuously deploy at regular milestones/intervals, even unfinished code. As long as the deployment isn't broken code, this gives you a chance to catch UI/logic issues quickly.
I can't stress enough to deploy regularly. It's a different skill set and can affect the way you code. Also, it sucks to work so hard to finish a side project only to find a new set of deployment issues.
Finally, plan a release party
Think of how you want to show the world your baby. Be willing to briefly (I stress briefly) write about your journey and the results. Take the time to show screenshots, make short videos, and process the design mockups.
A few suggestions are a LinkedIn post, a blog post, or a tech talk at your local meetup scene.
Top comments (0)