Introduction of Web Development

and
The Mea(r)n Stack
 Lesson Plan

Subject/Course MEA(R)N Stack Web Development

Introduction to Web Development and the
Lesson Title
MEAN Stack:

Lesson Objectives

Understand the basics of web development and its components (frontend, backend, database).

Describe the MEAN stack and its advantages.

Set up a development environment for building MEAN stack applications.

Introduction
Web Development means creating, building, and maintaining websites that run efficiently on a
web browser.
It includes everything that makes a website work — design, coding, database handling, and
updates

• Key Aspects of Web Development :

1️⃣ Frontend Development (Client-Side) :
• Focuses on what the user sees and interacts with on the screen.
• It includes the design, layout, and interactivity of a website.
• Languages/Technologies: HTML, CSS, JavaScript
• Example: Buttons, forms, navigation menus, animations.
2️⃣ Backend Development (Server-Side) :
• Handles how the website works behind the scenes.
• Manages databases, user requests, authentication, and server logic.
• Languages/Technologies: [Link], PHP, Python, Java
• Example: When a user logs in, the backend checks their data in the database.
3️⃣ Full Stack Development :
• A Full Stack Developer works on both Frontend and Backend.
• They design the web pages (Frontend) and also manage the data and logic (Backend).
• Example: A e-commerce site including the shopping interface and the payment database
system.
4️⃣ Database Management :
• Focuses on storing, organizing, and retrieving data efficiently and securely.
• Ensures that all user data (like profiles, orders, messages) are properly managed.
• Common Databases: MongoDB, MySQL, PostgreSQL.
5️⃣ Web Design :
• Deals with the look and feel of the website.
• Ensures the design is user-friendly, attractive, and responsive.
• Tools: Figma, Adobe XD, Canva.
6️⃣ Maintenance and Updates :
• Websites require regular updates and bug fixes.
• Helps improve performance, security, and features over time.
• Example: Updating payment gateways or fixing broken links.
How a Web Application Works
A web application works through the continuous communication between the browser (client), the server,
and the database.
This process ensures that user actions on the website are processed and displayed correctly.

Step-by-Step Working :
 Step-by-Step Working of Web Application :
1️⃣ User Sends a Request (Client-Side)
• The process starts when a user performs an action in the browser, such as clicking a button
or submitting a form.
• This action sends a request to the web server.
• Example: When you click “Login,” your email and password are sent to the server.

2️⃣ Server Receives and Processes the Request

• The server acts as the brain of the application.
• It checks what the user wants (for example, to log in or see a product).
• The server may interact with the database to get or store information.
 Step-by-Step Working of Web Application :
3️⃣ Server Fetches or Updates Data from the Database
• The database stores all the important data like user details, product lists, messages, etc.
• The server retrieves or updates this data depending on the request.
• Example: When you log in, the server checks your credentials in the database.

4️⃣ Server Sends Response Back to Browser

• Once the data is processed, the server sends a response (usually in HTML, JSON, or other
formats) back to the browser.
• The browser then displays the result to the user.
• Example: If login is successful, you’re redirected to your profile page.

Browser (Client) → Server → Database → Server → Browser

What is the MEAN Stack
• MEAN is a full-stack JavaScript framework used to build dynamic and modern web applications.
• It combines four powerful technologies — MongoDB, [Link], Angular, and [Link] — that work
together from front-end to back-end.
MEAN stands for:
Letter Technology Purpose

Database (stores data

M MongoDB
in JSON-like format)
Backend web
framework for [Link]
E [Link]
(handles routes and
APIs)
Frontend framework
A Angular for building user
interfaces
JavaScript runtime that
N [Link]
executes backend code
Architecture Flow of MEAN Stack
Client (Angular) → Server (Express + [Link]) → Database (MongoDB)
Architecture Flow of MEAN Stack
1. User interacts with Angular (Frontend):
◦ The user opens the web page in a browser.
◦ Angular displays the interface (buttons, forms, etc.) and handles user input.

2. Angular sends data request to Express (Backend):

◦ When the user performs an action (e.g., submits a form), Angular sends a request (usually
using HTTP) to the backend server.

3. Express + [Link] process the request:

◦ [Link] receives the request and routes it to the correct function.
◦ [Link] executes the server-side logic and connects to the database.
Architecture Flow of MEAN Stack
4. Express + [Link] process the request:
◦ [Link] receives the request and routes it to the correct function.
◦ [Link] executes the server-side logic and connects to the database.

5. MongoDB stores or retrieves data:

◦ The data is fetched or saved in the MongoDB database.
◦ MongoDB returns the requested data back to the server.

6. Result is sent back to Angular for display:

◦ The backend sends the response (in JSON format) to Angular.
◦ Angular updates the user interface and shows the final output to the user.
Setting up the Development Environment
To start developing a MEAN Stack Application, we need to install and configure the required tools
on our system.

Main Components to Set Up :

Tool Purpose

[Link] Runs JavaScript code on the server

npm (Node Package Manager) Manages JavaScript packages

Angular CLI Helps create and manage Angular projects easily

MongoDB Stores application data

Step By Step Installation Process :
3. Set Up MongoDB
1. Install [Link] and npm
1. Go to
1. Go to [Link]
[Link]
2. Download and install the LTS (Long-Term mmunity
Support) version.
2. Download MongoDB Community Edition and
3. After installation, open Terminal and check install it.
versions:
3. To start MongoDB service: mongod
node -v
npm -v 4. You can use MongoDB Compass (a GUI tool) for
easier database management.
2. Install Angular CLI
Angular CLI helps create Angular apps quickly 4. Install Visual Studio Code (VS Code)
with built-in commands. 1. Download from [Link]
Run this command in the terminal: 2. Install and open it.
npm install -g @angular/cli 3. To open VS Code from terminal (Mac):
After installation, check the version: ng version ◦ Open VS Code → Press Cmd + Shift + P → Type
If you see Angular CLI details, it’s installed Shell Command: Install 'code' command in PATH
successfully. ◦ Now, you can open any folder by typing: code .
Prerequisites to Learn MEAN
1. Basic Web Foundations :
Before diving into any full-stack development:
• HTML5 — structure of web pages
◦ Elements, tags, forms, semantic HTML
• CSS3 — styling and layout
◦ Flexbox, Grid, responsive design, media queries
• JavaScript (ES6+) — core logic and dynamic behavior
◦ Variables, functions, loops, arrays, objects
◦ Arrow functions, destructuring, template literals
◦ Promises, async/await
◦ DOM manipulation and event handling
Prerequisites to Learn MEAN Stack
2. Version Control
• Git & GitHub
◦ Basic commands (init, add, commit, push, pull)
◦ Branching and merging
◦ Cloning and using repositories

3. Programming Concepts
• Understanding of:
◦ Data types and operators
◦ Conditional logic and loops
◦ Functions and scope
◦ Arrays and objects
◦ Error handling (try...catch)
◦ Basic problem solving (algorithms, logic building)
 MEAN Stack – Full Semester Roadmap
1️ ⃣ Introduction to Web Development and the MEAN Stack
• Overview of modern web development
• Client–server architecture
• Introduction to MEAN stack (MongoDB, [Link], Angular, [Link])
• Setting up the development environment (Node, npm, Angular CLI, MongoDB, VS Code)
Weightage in syllabus: 4% + Teaching Hours : 2 hours
Outcome: You will be able to install the necessary tools and software required for full stack
development.

2️⃣ MongoDB
• Introduction to NoSQL and MongoDB architecture
• Installation and configuration (local & Atlas)
• CRUD operations (Create, Read, Update, Delete)
• Indexing, sorting, and querying
• Schema design and data modeling using Mongoose
Weightage in syllabus: 20% + Teaching Hours : 10 hours
Outcome: Students can design and implement database schemas and perform CRUD operations
efficiently.
 MEAN Stack – Full Semester Roadmap
3️⃣ Angular – Frontend Development 4️⃣ [Link] & [Link] – Backend
• Introduction to Angular framework and setup • Introduction to [Link] runtime & npm
• Components, Modules, and Services • [Link] basics — routing, middleware,
• Data binding, directives, and templates request handling

• Forms and validation (Template-driven & • REST API creation and testing (using Postman)
Reactive) • Authentication and security (JWT, [Link])
• Routing and navigation • Error handling, logging, and environment
• HTTP client and Observables management

• Building a complete frontend for the MEAN

stack app Weightage in syllabus: 20%
Weightage in syllabus: 30% Teaching Hours : 10 hours
Teaching Hours : 13 hours Outcome: you can build secure RESTful APIs
Outcome: Students can build dynamic and modular connected to MongoDB.
SPAs using Angular integrated with backend APIs.
 MEAN Stack – Full Semester Roadmap
5️ ⃣ Integration – Connecting All Layers
• Integrating Angular frontend with [Link] API
• User authentication and session management
• Real-time data handling with WebSockets ([Link])
• API error handling and testing
Weightage in syllabus: 10% + Teaching Hours : 3 hours
Outcome : Students can connect and synchronize frontend and backend layers into a unified MEAN
stack app.

6️⃣ Deployment and Best Practices

• Preparing MEAN application for deployment
• Hosting & server setup (Render, Netlify, Vercel, etc.)
• Security best practices & performance optimization
• Testing and debugging techniques
• Version control (Git/GitHub) and CI/CD overview
Weightage in syllabus: 6% + Teaching Hours : 3 hours
Outcome: Students can deploy, secure, and maintain MEAN applications professionally.
 MEAN Stack – Full Semester Roadmap
7️⃣ Final Project
• Full-stack MEAN project integrating all technologies
• End-to-end development: planning → design → implementation → testing → deployment
• Documentation and presentation

Weightage in syllabus: 10%

Teaching Hours : 4 hours
Outcome: Students demonstrate complete MEAN stack development skills through a deployable
project.
 Suggestion :
• Web development is not a subject that can be effectively learned in isolation or by studying topics
independently.
• Each concept and technology in the MEAN Stack is interconnected — forming a single, integrated
system.
• If a student misses any class or skips a particular topic, it can cause significant difficulty in
understanding subsequent modules, as every layer (MongoDB, Express, Angular, and [Link])
builds upon the previous one.
• Hence, regular attendance and consistent practice are strongly recommended to ensure
smooth learning and complete understanding of the entire development process.
THANK YOU