The flow of building a full-stack web application
When I am new to web development I often have confusion about how everything works together, how to connect all the things, how a full-stack web app is built from scratch, how to plan everything, what all the necessary stuff and so many... If you are also a new web dev or learning web, then I am sure you have also lots of confusion. So, in this blog, I try to reduce that confusion up to some point by giving you a high-level overview of building a full-stack web application.
Before we start
Before reading this blog, there are a few things to note,
- This is my preferred way of doing things, you may not need to do it exactly like this.
- This flow is for small or intermediate-level applications.
Let's get started
Phase 1 - Strategy
Before jumping into the project ask yourself a few questions-
- Why I am doing this?
- Who are my audience?
- What tech stack do I need?
- How much time it may take?
- How much budget it may take?
Phase 2 - Design and Prototype
No one starts a project without having a proper design, even if you do you will end up creating a big mess. So get a design first. Find inspiration from websites like Dribbble, and Behance and then use tools like Figma, Adobe XD, Sketch, etc... to make a design and prototype.
Read my blog about web design principles.
https://blog.itsrakesh.co/web-design-principles-1p2k
Phase 3 - Development
Development is again divided into three sub-phases.
1. Frontend
1. Development
So you got the design, what next? Start building Frontend with any framework or library.
Widely used frontend frameworks/libraries-
- React
- Angular
- Vue
Must go through this Front-End Checklist and make sure everything is ok.
2. Testing
Testing is as important as building. Use a testing library to test the frontend. Make web site responsive. Use tools like ngrok to share your localhost and get feedback.
2. Backend
1. Development
Frontend is ready! Let's start building the backend and REST API.
Widely used backend frameworks/libraries-
- NodeJS
- PHP
- RoR
2. Testing
Use tools like Postman or Hoppscotch to test your API. Use jest for NodeJS, PHPUnit for PHP, and so on...
Now connect frontend and backend. Test the whole application.
This may help you-
https://blog.itsrakesh.co/different-ways-to-connect-react-frontend-and-node-backend-1pik
3. Deployment
Development done! Now containerize your application with docker, set up CI/CD pipelines, and do all the DevOps stuff. Or if your website is small and simple just directly deploy on hosting services.
Phase 4 - Execution
Now comes the final phase and most important phase.
Recommended things to do after developing your application-
- Submit your site to Search console.
- Setup Google Analytics
- Track events with Facebook pixel if you want to create ad campaigns.
- Set up goals.
- Monetize your website.
That's it! This is a high-level overview of building a full-stack application.
⚒️Tool of the week⚒️
- Squoosh is a free image size reducer tool while maintaining high quality.
I hope you find this useful.
LEAVE A COMMENT OR START A DISCUSSION
MORE ARTICLES
3 min read
Introducing Publish Studio: Power Digital Content Creation
Say “Hi” to Publish Studio, a platform I’ve building for the past few months. If you are a content writer, then you should definitely check it out. And if you are someone who has an audience on multiple blogging platforms and need an easy way to manage your content across platforms, then you should 100% give it a try.
10 min read
Let's Build a Full-Stack App with tRPC and Next.js 14
Are you a typescript nerd looking to up your full-stack game? Then this guide is for you. The traditional way to share types of your API endpoints is to generate schemas and share them with the front end or other servers. However, this can be a time-consuming and inefficient process. What if I tell you there's a better way to do this? What if I tell you, you can just write the endpoints and your frontend automatically gets the types?