Guidelines for the first projects...
This blog is for those, who want to start their first full stack development project but not have enough idea about how to start. I will try to cover some of the things that you should follow for make your first project journey more smooth. Folder Structure: The first thing you might face difficulties is creating and understand the folder structure. It may vary by project to project, but their are some common concept like creating 2 separate folder, one for frontend and other one is for backend. Inside each folder you will have multiple folders. For backend you will have folders like models, services, api endpoints etc (based on your requirements) . And for frontend, you will have src folder inside which you will find components, assets, pages, api, utils etc folders (if you are using React). fullstack-project/ │ ├── backend/ # Backend service │ ├── app/ # Core backend logic (for FastAPI) │ │ ├── api/ # Route handlers │ │ ├── models/ # Database models │ │ ├── schemas/ # Pydantic schemas or DTOs │ │ ├── services/ # Business logic │ │ ├── core/ # App config, database setup, etc. │ │ └── main.py # Entry point (e.g., FastAPI app) │ ├── tests/ # Backend unit/integration tests │ ├── requirements.txt # Python dependencies │ └── .env # Environment variables │ ├── frontend/ # Frontend service │ ├── public/ # Static files (favicon, index.html) │ ├── src/ # React app source │ │ ├── assets/ # Images, CSS, fonts, etc. │ │ ├── components/ # Reusable UI components │ │ ├── pages/ # Page-level components (e.g., Home, Login) │ │ ├── api/ # API utility functions │ │ ├── context/ # React context (auth, theme, etc.) │ │ ├── hooks/ # Custom hooks │ │ ├── App.jsx # Main App component │ │ └── main.jsx # React DOM rendering │ ├── tailwind.config.js # Tailwind CSS config (if using) │ ├── vite.config.js # Vite config │ └── package.json # Frontend dependencies │ ├── database/ # SQL scripts, migrations, seeders │ ├── migrations/ │ └── init.sql │ ├── docs/ # Project documentation │ └── README.md │ ├── .gitignore └── README.md # Main project README Write clean code: Make sure you must write code as clean as possible. It is a good practice. You should right the logics more efficient way. You can also create a folder for a particular module and inside that you can create multiple files so that anyone can easily find the code written for a specific purpose. It will reduce cognitive complexity. Another thing you should remember that don't make a function so large with so much logics in a single function, rather use multiple functions, each for a particular logic and use them in that function. Keep in mind: Before writing any routes, you should always first do some floor planning like how this routes is going to use, how many times this routes will be called. It is completely necessary when you are going to deploying the project into the server. Because the more api needs to call from backend, the more it will take time to load and resulting the website slow. Wish a happy journey for your first project
This blog is for those, who want to start their first full stack development project but not have enough idea about how to start. I will try to cover some of the things that you should follow for make your first project journey more smooth.
Folder Structure:
The first thing you might face difficulties is creating and understand the folder structure. It may vary by project to project, but their are some common concept like creating 2 separate folder, one for frontend and other one is for backend. Inside each folder you will have multiple folders. For backend you will have folders like models, services, api endpoints etc (based on your requirements) . And for frontend, you will have src folder inside which you will find components, assets, pages, api, utils etc folders (if you are using React).
fullstack-project/
│
├── backend/ # Backend service
│ ├── app/ # Core backend logic (for FastAPI)
│ │ ├── api/ # Route handlers
│ │ ├── models/ # Database models
│ │ ├── schemas/ # Pydantic schemas or DTOs
│ │ ├── services/ # Business logic
│ │ ├── core/ # App config, database setup, etc.
│ │ └── main.py # Entry point (e.g., FastAPI app)
│ ├── tests/ # Backend unit/integration tests
│ ├── requirements.txt # Python dependencies
│ └── .env # Environment variables
│
├── frontend/ # Frontend service
│ ├── public/ # Static files (favicon, index.html)
│ ├── src/ # React app source
│ │ ├── assets/ # Images, CSS, fonts, etc.
│ │ ├── components/ # Reusable UI components
│ │ ├── pages/ # Page-level components (e.g., Home, Login)
│ │ ├── api/ # API utility functions
│ │ ├── context/ # React context (auth, theme, etc.)
│ │ ├── hooks/ # Custom hooks
│ │ ├── App.jsx # Main App component
│ │ └── main.jsx # React DOM rendering
│ ├── tailwind.config.js # Tailwind CSS config (if using)
│ ├── vite.config.js # Vite config
│ └── package.json # Frontend dependencies
│
├── database/ # SQL scripts, migrations, seeders
│ ├── migrations/
│ └── init.sql
│
├── docs/ # Project documentation
│ └── README.md
│
├── .gitignore
└── README.md # Main project README
Write clean code:
Make sure you must write code as clean as possible. It is a good practice. You should right the logics more efficient way. You can also create a folder for a particular module and inside that you can create multiple files so that anyone can easily find the code written for a specific purpose. It will reduce cognitive complexity. Another thing you should remember that don't make a function so large with so much logics in a single function, rather use multiple functions, each for a particular logic and use them in that function.
Keep in mind:
Before writing any routes, you should always first do some floor planning like how this routes is going to use, how many times this routes will be called. It is completely necessary when you are going to deploying the project into the server. Because the more api needs to call from backend, the more it will take time to load and resulting the website slow.
Wish a happy journey for your first project
