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

Step 5: Build API

Now we know what data looks like and how it's changed, we can build API

1. Install the necessary packages
2. Setup the server
3. Create a model with the given data
4. Create routes
5. Create the controller
6. 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.