Avoid the Graveyard of Abandoned Projects: Plan Before You Code

Why Planning Matters

If you’re anything like me, coding is your favorite part of building a web app. And you have likely been in this situation many times before: you come up with a project idea, get really excited, start building immediately, realize the scope of your project is bigger or different than you originally thought, have to completely reimagine and maybe restart your project. It either ends up in the abandoned Graveyard of Started Projects or maybe you come out with a good web app — although I bet it could have been better with some foresight.

While this is always tempting, I have learned that actually planning a project before you start building it is much more efficient. And less frustrating when you actually start coding. Because you actually know where you are going!

Step 1: Organize Tasks With A Kanban Board

Today, I finally started planning out a web app that I have been brainstorming for a few months. Before jumping into tasks, I needed a way to keep track of everything. Kanban boards help break down large projects into small, manageable tasks and see them visually. For personal projects, I use trello and create three columns: Backlog, In Progress, Done. Then, I start adding cards to the backlog — each representing a task I need to do. Within each card, I write a description that includes a “definition of done” and any details I want to make sure I don’t forget.

The first cards I made were:

1. Write a planning document

2. Sketch a wireframe

3. Design web app in Figma

Once I have an organized backlog of tasks, I like to start with the foundational piece: a planning document. This helps me define the project before getting too deep into the details.

Step 2: Write A Planning Document

The first stage of actually planning the project is a planning document. I decided to include these details on my GitHub README. This document should include:

• Features for MVP (Minimum Viable Product)

• Features to add after the MVP is done

• What technologies will be used

• Project architecture

• Backend

  • What kind of data the app is storing. What is the schema?

  • What API endpoints we will need to interact with the data

  • What CRUD operations will be needed

• Pages the web app will have

• Project timeline

• How I will go about building -- backend or frontend first?

Once all of these details are ironed out, it’s time to work on a wireframe.

Step 3: Sketch Wireframes

Maybe I’m old-school for this, but I always sketch out wireframes on paper first. For me, it makes it easier to come up with multiple ideas, compare them, combine them, trash them, whatever. When thinking about a wireframe, I think about a few things:

• Who is the user?

• How tech savvy are they?

• Where will users be using this app?

• How can I make the app as intuitive as possible?

My app will be used by people of all ages, so I need to keep that in mind when I wireframe. It needs to be intuitive for 15 year olds and 85 year olds alike. I will wireframe both a desktop version and a mobile version of my web app. As you work on wireframes, you’ll probably realize there are issues with the UX and re-plan the wireframes. Once I settle on wireframes that make sense, I will move onto designing.

Step 4: Designing Before Coding

After I have the planning document and wireframes thought through and finalized, the next step is designing. Typically, I choose a color scheme first. My favorite tool to brainstorm color schemes is ColorHub. I use Figma to create high-fidelity mockups of my designs. I create a desktop and mobile version of every page of the app. I also will make mockups for reusable UI components such as modals, drop downs, buttons, and form elements to keep the design consistent.

After you have designed the app, it’s time to follow your planning document and start building! You also should have a better idea of the steps you will need to take to develop your app. At this point as well as during the process, you can add more cards to your Kanban board. Make sure to refer back to it when you are building!

Final Thoughts

Taking the time to plan your web app before diving into code might feel like it slows you down at first, but in reality it saves you time, headaches, and endless rewrites. By using a Kanban board, writing a solid planning document, sketching wireframes, and designing before coding, you set yourself up for a smoother development process with fewer roadblocks.

When you finally start coding, you’ll have a clear path and feel confident walking into it. So next time you get a great idea for a web app, resist the urge to jump straight into the code—take a step back, plan it out, and watch how much easier (and better!) the final product turns out.