Last updated:
3 min read
The flow of building a full-stack web application
Rakesh Potnuru
Author
0%
SHARE

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

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

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

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

Execution

Now comes the final phase and most important phase.

Recommended things to do after developing your application-

That's it! This is a high-level overview of building a full-stack application.


⚒️Tool of the week⚒️

Squoosh

  • 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

All types of POST Requests with API Tester mobile app

    6 min read

    sponsored

All types of POST Requests with API Tester mobile app

Post requests are the most common types of requests that we perform on the internet and it is very useful in our day-to-day work life. These methods are those which are used to transfer data from a web browser to the server. In this article, I will teach you how to test post requests using API Tester mobile app.

How to write tests in full-stack MERN web application

    9 min read

How to write tests in full-stack MERN web application

Only by writing tests can you understand the significance of testing. No coding Bootcamp or course, as far as I know, teaches you how to write tests. Writing tests may not be necessary for demo projects or coursework projects, but it is critical for real-world applications. So, in this Part 3 of the “Let’s build and deploy a full stack MERN web application” series, I’ll demonstrate how to write tests for ReactJs components and ExpressJs RESTAPI.

Subscribe to Newsletter

Weekly


  • Never miss an update.
  • Get articles and snippets directly to your inbox.
  • Subscribe to stay connected and avoid getting lost among millions of websites.

Monthly


  • Coming soon...