The flow of building a full-stack web application
Tags: beginners, codenewbie, webdev
Published: 2022-01-10 06:25:54

When I am new to web development I often have confusion on 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 exactly like this.
- This flow is for small or intermediate level applications.

## Let's get started

## Phase 1 - Strategy

![Strategy](https://cdn.hashnode.com/res/hashnode/image/upload/v1641714307949/6gNbmEA_t.jpeg)

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](https://cdn.hashnode.com/res/hashnode/image/upload/v1641715001975/ZOVSdVTkM.jpeg)

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](https://dribbble.com), [Behance](https://www.behance.net) and then use tools like Figma, Adobe XD, Sketch etc... to make a design and prototype.

Read my blog about web design principles.

{% link https://dev.to/itsrakesh/web-design-principles-1p2k %}

## Phase 3 - Development

![Development](https://cdn.hashnode.com/res/hashnode/image/upload/v1641721208895/L7L32u3pQw.jpeg)

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](https://frontendchecklist.io) 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](https://ngrok.com) 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](https://www.postman.com) or [Hoppscotch](https://hoppscotch.io/) to test your API. Use jest for NodeJS, PHPUnit for PHP and so on...

Now connect frontend and backend. Test whole application.

This may help you-

{% link https://dev.to/itsrakesh/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](https://cdn.hashnode.com/res/hashnode/image/upload/v1641725684086/_DKONosk-.jpeg)

Now comes the final phase and most important phase.

Recommended things to do after developing your application-
- Submit your site to [Search console](https://search.google.com/search-console).
- Setup [Google Analytics](https://analytics.google.com/analytics)
- Track events with [Facebook pixel](https://en-gb.facebook.com/business/learn/facebook-ads-pixel) if you want to create ad campaigns.
- Set up goals.
- Monetize your website.

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

---

## ⚒️Tool of the week⚒️
[Squoosh](https://squoosh.app)

- Squoosh is a free image size reducer tool while maintaining high quality.

---

I hope you find this useful.
Follow for more weekly awesomeness.
[Twitter](https://twitter.com/rakesh_at_tweet)?