Do it Agile: Thin Vertical Slices — Beginner Steps
Making a web app can be very daunting for a beginner dev, especially for students just getting the hang of coding. Where to start? Do I need to get the relationships set up in the backend before I hop over to the frontend? How much planning should I do at the beginning? How do I even organize all that I want to do with this app?
Don’t worry, if you apply agile practices to your project process, it’s a lot less to tackle.
Firstly, whiteboarding and wireframing out what you want your app to do and look like is where you should start. You can do this by answering these questions:
— What is the problem I’m trying to solve?
What is your app going to fix? Identify what your app can do for the user. Think of it this way — as a user, I want to accomplish ______. This is a good place to start.
— Who is my audience?
Target who you’re building this app for so you can specialize it to be the most impactful. A generalized app serves no one efficiently. This will also allow you to have a better understanding of the next question.
— What is the vibe?
This will be effected by the above questions. You might want to stick to a professional and modern approach for a medical app, but a playful tone could be applied to a dating app. This helps you determine the styling aspect of your app.
— What features are the app’s focus?
Here you can brainstorm what you want to do with your app. Think about what you want the main focus to be that solves the problem, and you can add additional features that assist in achieving that goal. Specifically, focus on what benefits the user.
— How do I want the web page(s) to be look?
This is a good time to have a rough idea of what color scheme you want, general layout, font types, etc. Having this in mind will help you flesh out your app.
IMPORTANT: Keep in mind that all this planning is not stagnant! These are guidelines to follow. If in the middle of your project you decide that a feature implemented in a different way would be cooler or more useful, or the color scheme isn’t quite what you’re feeling anymore, great! Change it! The point of applying agile practices with code and having each feature it’s own separate entity is that you can make changes on the fly without breaking everything else.
There’s more you can debate on in this stage, but for this article we’ll stick with that. Now you can start splitting up what you’ve brain stormed into thin vertical slices known as user stories. Using the ‘as a user I want to do ____.’ as a template when writing your user stories. I personally use an awesome planning app called Trello. Super helpful in splitting up user stories into categories like backlog, running tasks, ready, etc.
With each user story, I create a checklist of what makes that feature complete. A complete feature includes a resource in the backend, having the feature show up dynamically on the frontend, is styled correctly, and has been tested and refactored to be efficient. This is how you achieve an mvp app quickly and keep your app 100% functional at all times without getting caught with a broken app ten minutes before presentation.
Obviously, there’s more to applying agile to your coding process, but this is the bare basics to follow when making a basic web app. The most important thing is to stick with the organization and not try to get all the backend or all the frontend completed at once. This is tempting as a beginner, and I’ve done it too, but it will slow you down more than you realize.
