02-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:

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

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 !!