# Beginner's Guide to Fullstack Web Development: A Complete Overview

*Lectures 01 and 02 of Chai and Code (mentioned at the end of the article)*

> Full Stack = Frontend + Backend

## **Introduction**

Full-stack web development involves working on both the frontend and backend of a web application. This guide provides an overview of the essential components and technologies involved in full-stack development.

## **Frontend**

* Frontend is the interface of webpages with which users interact.
    
* Users don't know about the backend logic.
    
* These interfaces are made using *HTML, CSS, and JavaScript*.
    
* Technologies: HTML, CSS, JavaScript.
    
* Frameworks: React, Vue, Angular, etc.
    

## **Backend**

* The backend consists of the Server, Application, and Databases.
    
* **Server**:
    
    * It is the computer which lives on the website 24/7 so that it can take input requests from all over the world.
        
* **Application**:
    
    * It is the main logic of the backend.
        
    * It gets the request from the user and responds.
        
    * It serves HTML, CSS, and JavaScript to the users in the form of a web interface.
        
    * It communicates with both the **server and databases**.
        
    * **Example**: When a user logs in, it gets the request to the application as email and password, then it checks the email & password in the database and then responds.
        
    * If the request is invalid, it responds with a 404 error.
        
* **Databases**:
    
    * Databases are used to store and retrieve data.
        
    * They can be located remotely, even on another continent.
        
    * They provide permanent data storage
        
    * They help to persist data even if the system shuts down unexpectedly
        

### **Web App:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1744389966754/4f6b5834-ae60-4f95-9636-d703c6810bc2.png align="center")

## **Tools and technologies**

**Frontend:**

* HTML, CSS & JavaScript
    

**Frameworks:**

* React (Popular)
    
* Angular
    
* Vue
    
* These are based on JavaScript
    

**Backend Languages & Frameworks:**

* JavaScript: Node.js (Popular)
    
* Python: Django, Flask
    
* Java: Spring Boot
    
* Ruby: Rails
    
* PHP: Laravel
    
* C#: [ASP.NET](http://ASP.NET)
    

## **Backend File Structure**

**src**

* index.js
    
* app.js (APP : config, cookie, urle ncode)
    
* constants.js : enums, DB-name (e.g.aeroplane consist only three types of seat)
    
* DB : for mongoose models
    
* Models : to store data in structured way (e.g. libraries)
    
* controllers : it contains functionality , method
    
* Routes: e.g., /signup, /login
    
* Middlewares: used for request processing ( e.g. multer : uploading images locally)
    
* Utils: separates functionalities for sending emails and uploading files
    
* More
    

You will be able to understand the meaning of each folder and file throughout the series.

Refer below videos for more clarity !!

%[https://www.youtube.com/watch?v=EH3vGeqeIAo&list=PLu71SKxNbfoBGh_8p_NS-ZAh6v7HhYqHW&index=1] 

%[https://youtu.be/pOV4EjUtl70?feature=shared]