MODULE 01

Trainer: Amir Raja

Phone Number: 6294360529
Email-Id: [email protected]
Module I: Basics of Full Stack
Understanding the Basic Web Development Framework - User - Browser – Webserver - Backend Services –
MVC Architecture - Understanding the different stacks –The role of Express – Node – Mongo DB – React.

Understanding the Basic Web Development Framework :

What is Web Development?
Web development is the process of creating websites or web applications that run on the internet. It
includes everything from designing the website layout to writing the code that makes it work.
Web development is broadly divided into two main areas:
• Frontend Development (Client-side)
• Backend Development (Server-side)
What is a Web Development Framework?
A web development framework is a pre-written set of tools, libraries, and best practices that help
developers build web applications more efficiently.
Frameworks:
• Provide structure to the code.
• Handle repetitive tasks (like routing, templating, form validation, database access).
• Promote best practices and security standards.
Components of Web Development
Frontend Development (Client-side)
Definition: Deals with everything the user sees and interacts with directly in the browser.
Core Technologies:
• HTML (HyperText Markup Language): Structures the content.
• CSS (Cascading Style Sheets): Styles the layout (colors, fonts, spacing).
• JavaScript: Adds interactivity (e.g., buttons, sliders, forms).
Popular Frontend Frameworks:
• React.js – developed by Facebook
• Angular – developed by Google
• Vue.js – lightweight and beginner-friendly
Features Provided:
• Component-based structure
• DOM manipulation
• Event handling
• Routing
• State management
Backend Development (Server-side)
Definition: Focuses on the server, database, and application logic.
Core Languages:
• Java
• Python
• PHP
• Ruby
• Node.js (JavaScript runtime for server-side)
Popular Backend Frameworks:
• Express.js (for Node.js)
• Django (Python)
• Spring Boot (Java)
• Laravel (PHP)
• Ruby on Rails (Ruby)
Responsibilities:
• Handling HTTP requests/responses
• User authentication
• Business logic
• Database CRUD operations (Create, Read, Update, Delete)
• Security (input validation, data encryption)
Database Layer
Definition: Stores and retrieves data for the web application.
Types:
• Relational Databases: MySQL, PostgreSQL, Oracle
• NoSQL Databases: MongoDB, Firebase
Frameworks often provide ORM (Object Relational Mapping) tools to simplify database interactions,
such as:
 • Hibernate (Java)
• Mongoose (Node.js)
• SQLAlchemy (Python)
Full Stack Development
Definition: Involves both frontend and backend development.
A Full Stack Developer is skilled in:
• Frontend frameworks (e.g., React, Angular)
• Backend frameworks (e.g., Node.js, Django)
• Database operations
• APIs and Web services
Features of a Web Development Framework
1. MVC Pattern (Model-View-Controller):
o Separates application logic, UI, and data.
2. Routing: Maps URLs to specific functions or controllers.
3. Templating Engine: Generates dynamic HTML.
4. Form Handling & Validation
5. Security: Built-in protection against attacks (e.g., SQL Injection, CSRF).
6. Database Abstraction
7. Testing Support
Benefits of Using a Web Development Framework
• Faster development time
• Fewer bugs and more maintainable code
• Code reusability
• Scalability and performance
• Community support and plugins
• Security and best practices
A web development framework simplifies and accelerates the process of building websites and web
apps. Whether you're working on the frontend (React, Angular, Vue) or the backend (Express, Django,
Spring), frameworks help you stay organized, secure, and productive. Understanding how these
frameworks work together in a full-stack environment is essential for modern web developers.
Comparison Table: Frontend vs Backend Frameworks
Feature Frontend Frameworks Backend Frameworks
Purpose Frontend Frameworks Backend Frameworks
 Technologies Used HTML, CSS, JavaScript JavaScript, Python, Java, PHP
Examples React, Angular, Vue Express.js, Django, Spring Boot
Runs On Browser Server
User Interaction Handles buttons, forms, menus Processes requests, handles
APIs
Key Focus UX/UI Design, Interactivity Authentication, Routing,
Database
Tools Used Webpack, Babel, Redux ORM, REST API, Middleware

Full Stack Basics: User → Browser → Web Server → Backend Services

1. User
The user is the person interacting with the web application. They:
• Open a web browser
• Type a URL or click a link
• Interact with the website (e.g., login, fill a form, click buttons)
Example: A user opens www.amazon.in and clicks "Add to Cart".
2. Browser (Client-Side)
The browser is a software application like Chrome, Firefox, or Safari.
Functions:
• Sends HTTP requests to the server (when the user types a URL or submits a form).
• Renders the HTML, CSS, JavaScript received from the server.
• Executes frontend frameworks like React, Angular, Vue.
Technologies Involved:
• HTML – Structure of the web page
• CSS – Styling and layout
• JavaScript – Interactivity (e.g., form validation, dynamic content)
Example:
When the user clicks "Login", the browser sends a POST request with the username and password.
3. Web Server
The Web Server handles incoming requests from the browser and forwards them to the backend services
or returns static files.
Examples:
• Apache
 • Nginx
• Node.js (acts both as a server and runtime)
• Express.js (a Node.js framework)
Main Responsibilities:
• Accept requests (e.g., GET, POST)
• Serve static files (HTML, CSS, JS)
• Route requests to backend APIs
• Manage HTTPS/SSL
• Load balancing
Process:
User clicks ➝ Browser sends request ➝ Web Server receives it ➝ Server responds
4. Backend Services (Server-Side Logic)
Backend services perform all the actual business logic, data storage, and security processing.
Key Functions:
• Authentication (e.g., login system)
• Database Access (CRUD operations)
• Server-side logic (calculations, processing)
• API creation (RESTful services)
• Security & Validation
Backend Technologies:
Language Framework
JavaScript Node.js + Express
Python Django, Flask
Java Spring Boot
PHP Laravel
Example:
If a user logs in, the backend checks the credentials in the database and returns a response.
5. Database (Optional Layer)
The backend services often interact with a database to store and retrieve data.
Types:
• Relational (SQL): MySQL, PostgreSQL
• NoSQL: MongoDB, Firebase
Full Request-Response Cycle (Simplified)
User → Clicks Login
↓
Browser → Sends POST Request (username & password)
↓
Web Server → Forwards request to Backend
↓
Backend → Validates data → Queries database → Sends back result
↓
Web Server → Sends response to Browser
↓
Browser → Updates UI based on response

Summary Table
Layer Technology Responsibility

User Human Interacts with the application

Browser Chrome, Firefox Sends requests, renders UI

Web Server Apache, Nginx, Node Routes requests to backend

Backend Services Express, Django Business logic, data processing

Database MySQL, MongoDB Stores user and app data

Real-World Example: Login Function

1. User enters login details → clicks "Submit"
2. Browser sends a POST request to the web server.
3. Web server routes the request to the backend API (/login).
4. Backend verifies credentials from the database.
5. Backend sends a success or failure message.
6. Browser shows appropriate UI based on response.

MVC Architecture in Full Stack Development

MVC stands for Model-View-Controller. It is a design pattern used to separate concerns in an
application, especially in web development.
Overview of MVC:
Component Responsibility

Model Handles data, business logic, and database interactions

View User interface (UI) - what the user sees

Controller Handles user input, updates the model and view accordingly
How MVC Works:
1. User interacts with the View (UI)
2. View sends input to the Controller
3. Controller processes the input, calls the appropriate Model
4. Model updates data and returns the result
5. Controller passes this data to the View
6. View displays updated data to the user
Example (Full Stack Context):
Tech Stack:
• Frontend (View): React / HTML + CSS + JS
• Backend (Controller): Express.js
• Database (Model): MongoDB / MySQL
Use Case: User Registration
• View (React): Form to take user details
• Controller (Node.js/Express): Receives data via POST, validates it
• Model (Mongoose/Sequelize): Saves the user to the database
• Then sends response back → updates UI
Benefits of MVC:
• Separation of Concerns (easier to maintain)
• Scalable and testable
• Supports team collaboration (frontend/backend separation)
• Makes code reusable

Understanding the Different Stacks in Full Stack Development

And the Role of Express – Node – MongoDB – React (MERN Stack)
What is Full Stack Development?
Full Stack Development refers to the development of both frontend (client-side) and backend (server-
side) parts of a web application. A stack is a combination of technologies used to build an application.
Popular Stacks

Stack Name Frontend Backend Database

MERN React Node.js + Express MongoDB

MEAN Angular Node.js + Express MongoDB

LAMP HTML/CSS/JS PHP MySQL

Django Stack HTML/CSS/JS Django (Python) PostgreSQL

Focus: MERN Stack (MongoDB, Express.js, React.js, Node.js)

The MERN stack is a JavaScript-based full stack. Each component of the stack is built using
JavaScript or JS-based technologies.
1. React.js (Frontend – View Layer)
Role:
• A JavaScript library for building user interfaces
• Manages dynamic content and user interaction
• Uses components to build reusable UI elements
• Handles routing, state management, and UI rendering
Example:
• Displaying products, handling user input forms
2. Express.js (Backend Framework – Controller Layer)
Role:
• A minimalist web framework for Node.js
• Simplifies building server-side logic and APIs
• Handles routing, middleware, and HTTP requests/responses
Example:
• Handling login form submissions
• Defining API endpoints like /api/users, /api/products
3. Node.js (Runtime Environment – Execution Layer)
Role:
• A JavaScript runtime environment that runs JS code on the server
• Enables building fast and scalable server-side applications
• Supports non-blocking, event-driven architecture
Example:
 • Running the Express server
• Executing backend logic, connecting to the database
4. MongoDB (Database – Model Layer)
Role:
• A NoSQL database that stores data in JSON-like documents
• Flexible schema design using collections and documents
• Integrates easily with Node.js via Mongoose (ODM)
Example:
• Storing user data, product lists, orders, messages, etc.
How the MERN Stack Works Together (Flow):
1. User accesses the React frontend.
2. React sends a request to Express/Node server (API call).
3. Express handles the request and interacts with MongoDB to fetch or save data.
4. MongoDB sends data back to Express, which responds to React.
5. React updates the UI based on the response.
Real-world Use Cases:
• Social Media Applications
• E-commerce Platforms
• Blogs & CMS
• Online Booking Systems
• Real-time Chat Apps
Advantages of MERN Stack:
• Entirely based on JavaScript (frontend + backend)
• High performance and scalability
• Reusable components and modular structure
• Strong community support
• Seamless JSON data flow from frontend to database
Summary Table:
Layer Technology Description

View React.js Builds dynamic UI and handles user input

Controller Express.js Handles routing and API logic

Runtime Node.js Executes backend code on the server

Layer Technology Description

Model MongoDB Stores and retrieves application data

Question Bank of Module-01

Short-Questions
1. What does MVC stand for in web development?
2. Which component of MVC handles the business logic?
3. What is the main role of the browser in web architecture?
4. Which of the following is NOT a part of the MERN stack? (SQL, MongoDB, Express, React)
5. What is Express.js used for?
6. Node.js is built on which JavaScript engine?
7. In a web application, which part interacts directly with the user?
8. MongoDB stores data in which format?
9. Which technology is responsible for routing in a Node.js application?
10. Which part of the stack is responsible for rendering UI components?
11. Which of the following best describes full stack development? (MERN,LAMP,Frontend,Database)
12. Which part of a website usually runs on the server-side?
13. What is the purpose of an API in web development?
14. Which architecture divides an app into Model, View, and Controller?
15. Which database is commonly used in the MERN stack?
16. Which component is responsible for handling incoming HTTP requests in a Node.js app?
17. What type of architecture is followed by the MERN stack?
18. Which of the following is a frontend library used for building UIs?
19. In which layer of MVC is Express.js typically used?
20. Which is an example of a NoSQL database?
21. What is the main benefit of using React in frontend development?
22. What type of model does Node.js use for handling I/O?
23. What role does the webserver play in a web application?
24. What does REST stand for in web services?
25. Which part of the MERN stack communicates with the database?
26. What language is used to write Node.js applications?
27. Which Express method is used to define GET routes?
28. Which of these is a key feature of MongoDB?
29. What does the controller in MVC do?
30. In which architecture do components like Model, View, and Controller work independently?
Long-Questions
1. Explain the complete architecture of a full stack web application using the MVC pattern. Illustrate
with examples of technologies used in each layer.
2. Describe the MERN stack in detail. How do React, Express, Node.js, and MongoDB work together
in a full stack project?
3. Explain the full request-response cycle in a web application starting from user interaction to
database response. Include all layers involved.
4. Differentiate between frontend and backend development. Mention the core technologies,
responsibilities, and frameworks used in both.
5. What is a web development framework? Discuss its key features and advantages in building
scalable web applications.
6. Write a detailed note on the role of Express.js in backend development. How does it interact with
Node.js and MongoDB?
7. Discuss the MVC architecture. How does it help in separation of concerns and improve
collaboration between frontend and backend developers?