Hi there! You've been coding for a while, and you can read and understand code examples that you see, you could follow along the courses and build projects with the instructor BUT when you want to build a project on your own from the scratch, you don't know where to start, what to do, how to do. Don't worry, when I was a beginner, I used to be just like you. In this post, I give you a solid framework so that you can build any project that you want to build from the scratch by yourself. This framework works with dynamic websites well but can be tailored to frontend only websites as well
NOTE: You don't have to be a full-stack developer to use this framework, it works as long as the website is not static which means that there's user interaction.
Step 1: Understand what you are building
Regardless of whether you're building small or super-duper complex applications, the first step is always going to be understanding exactly what you're building. So in this step understand what you're building by writing down a short but concise description of the project you're building. Mostly client is going to give you a project description if you're building it for the client else you've to define it.
Step 2: Define the project requirements
In this step, list out all of the project requirements which is going to be user interaction with the data.
E.g
- User can log in/logout/register
- User can add a product to the cart
- User can purchase a product with his cart
- The user can delete his account
Step 3: Define the data structure of the project and the relationship between the data
Data in any dynamic application is the heart of the application. And it's always free of project requirements or UI or backend frameworks. So define the data of the application and the relationship of data with other data if there's
E.g: Example for todo
const user = {
id: "unique id",
username: "user name",
password: "some password"
}
const todo = {
id: "unique id",
task: "some task",
completed: false,
user: "user-id"
}
Step 4: Define the data flow of the application
Once you define the data structure and relationships between data, now you've to define the data flow which emulates how the user interacts with the application
E.g: Example for todo
- User register
-> failure - if the username is already taken, display an error message in the UI
-> success - goes to Login page
- User login
-> failure - display error message in UI to explain what went wrong
-> success - Todos home page
- Create todo -> failure - display error message in UI, indicating what went wrong -> success - display newly added todo in the todos section
- Edit todo -> failure - display error message in UI, indicating what went wrong -> success - display edited todo in the todos section
- Delete todo -> failure - display error message in UI, indicating what went wrong -> success - display list of todos which must not include deleted todo
- User login
-> failure - display error message in UI to explain what went wrong
-> success - Todos home page
Step 5: Build API
Now we know what data looks like and how it's changed, we can build API
- Install the necessary packages
- Setup the server
- Create a model with the given data
- Create routes
- Create the controller
- Refactor
Step 6: Build UI
I'd assume that you'd use component-based frameworks like React, Angular, and Vue, or even if you're building just with HTML, learn to break UI into individual component containers. In this step break UI into components hierarchy and decide where the state's going to live.
Summary:
So in this post, you've learned the framework to build any web development project from scratch, I hope you've found it useful. I'd love to hear your feedbacks and you guys approach.