How to plan your web app?
If you are thinking of building your web app, it would be worth to spend 1–2 days or more on planning, depends on how complex your app would be. That step will help you with organizing your ideas, eliminating errors and plan the structure of the project. I will show you that process on my projects.
First, you could describe what the app should do and which features you’d like to build. It could be a good practise for you to split features for MVP and stretch goals. That should help you focus on majority features and make app works.
My description:
The App helps the user to keep track of projects. Allow adding a meeting and note assigned to the project. User has quick access to the main information about the specific project.
My features:
You can notice that I highlighted on the red colour the features what would be less important to get my app works, but for sure I would be nice to built all of them. That plan let me focus on my MVP’s features than fancy ones.
Server
Take a moment and think about your server, in my project, I decided to use Rails for API-only Applications. To create that app remember using a command $ rails new my_api --api Just follow this instruction.
At that step, you should plan your models and relationships between them. You should give the attributes for each model and think about validation as well. It is really helpful for the next stages of building the project.
I used easy and friendly app diagrams.
Again, MVP has been highlighted on the green, and stretch goals on red.
Client-side
I chose to use React. To make easier the process of building the structure of components, I designed mocks for my app. I used balsamic, but you can find plenty of website for it like Figma. Choose what you like and feel comfortable!
Main Page for logged User — MVP
Main Page with stretch goals.
Needed form for that page.
Next Page in the app — user’s projects
Projects Page — MVP
Projects Page — stretch goals
Needed form for projects page.
If you would like and you think it would be helpful for you, you could make a tree for your app and go on. Below you can see an example only for a few components.
Summary:
Take time for the planning and the process building with the app would be way easier!
