One of the first problems, when you want to build a big app, is the planning part. Where to start? How to start? What are the first things to do?
After building several full-stack applications, I came to a pattern that is common and most effective in building your first big project.
Most of my first projects are build using ruby on rails for the back end and React.js for the front-end. However, this is not about the programing language used, but more about the planning part which can help build a project using any languages.
I will use as an example of my last project, which is a financial app for investment (http://smartlongterminvestment.com/).
How to plan the Back-end side
Part 1 The Idea
Probably this is the most simple and hardest part when you build an application. Find the right idea is important and does not require you any coding skills or build anything but you need to be inspired to something you like. Someone once told me that, it is really important when you work on a big project to choose something you like or something you would love to build for yourself, because when things will become difficult, and I can gurantee you that it will become a challenge at some point, at least you are more motivated to work on that project because you like it.
In my case, I choose a financial app because I like finance and stock investment and this helped me to commit a lot on the project and push myself to the limit. Without to talk about the satisfaction part when you finish building your project.
In this phase you don’t need to have all in mind in small details, instead, think at the big picture of the project and imagine your app is build and what you would like to communicate to the users rather than how would you write that code or build that component.
In my case, I wanted a way to communicate my investments to all the users and give a chance to the users to have their own portfolio to follow their own investments and gain helpful information.
Part 2 User story
The user story is what you want your users to see or to do when accessing your website or application.
This is an example of my user story:
Part 3 Models and Relationship
This is part is more technical and is when you decide your Models and how they will interact with each other. this requires knowledge of Object-oriented Programing. you can check my blog here for more info. https://medium.com/@musta7188/object-relational-mapping-orm-367458714367
For models’ relation, it is good to draw the diagram of your models and connect with their relationship for example: “one to many relations and many to many relations etc” depending on the project you building.
Here you can find an example of my table relationship:
How you can see I draw and write clearly what I want my models’ relationship to be.
Part 4 Schema
The Schema is what decide which attributes you would like your Models to hold and save in the database. For example, if you have a user you can choose to give him a first_name, last_name and email. Or you can sample give him a name, email and password. This is up to you which attributes you need for the project. However, you can still add more attribute later if you think that one of the models need to hold more information.
Example of my Schema
How you can see in my schema I declare the attributes that I want my Models to hold and the ID of their relationship with the other models.
Now you just need to design the routes and the controllers but these are not part of the planning part and we won’t cover them here.
How to plan the Front-end side.
Part 5 Components’ structure
I found it important to structure my components and decide what component should render what.
When I started using React for the first time I could only pass states as props from components to another only if they are directly related to each other, and in this case, the structure of the components is essential. When I learned Redux this became less necessary because thanks to the magic of redux you can Save in a central database all the states and call them wherever you need them.
However, it is still important to have a clear structure in mind when building the components because when you debug or need to explain your app to someone would be easy if you have clear structure of your components.
Example of mine:
I need to say that my application got a bit more complicated than this and I had to add more and more components that are not listed here. But this is the diagram that helps me to design the base of my application.
Part 6 the Design
Another thing I found helpful is to design how each page should look like. even if it’s not going to look exactly the same but at least you have an idea where do you want the navbar, buttons, modal or anything you think to have in your page.
I used a website name Figma https://www.figma.com/
Example of my Dashboard:
Design:
Real Web site:
As you can see I tried to stick as much as I could to the original design I had in mine and that helps me a lot.
I hope this blog can help you to be more organized and have a clear idea of how to start to build a big full-stack project.
Last but not least, if you are using or relying on any API to build your app, make sure to spend at least a some days studying the data coming from that API and limitation you can face to avoid bad surprise in the middle of your project.
