Skill Lab MERN

Session: Basics &

Deployment
by
Hardik Pawar
7th Sem CSE
Placed at Arcesium
 Index

1 2 3 4 5
INTRO TO MVC MERN BASICS LIVE DEMO MERN-O-GAME DEPLOYMENT
ARCHITECTURE PROJECT GUIDE
STRUCTURE
Intro to MVC
Architecture
What is MVC?
Model-View-Controller (MVC) is a
software design pattern widely used
for web application development.

Helps in separating application logic

into three distinct yet interconnected
components to improve
maintainability and scalability.
MVC Components
Model

Responsible for managing application

data and business logic.

Represents the database structure

and handles interactions with the
database (CRUD operations).
MVC Components
View

User interface and presentation layer:

Controls what users see and interact
with

Fetches & renders data from the

model
MVC Components
Controller

Handles user input and interactions

Acts as the bridge between the model

and the view.

Processes requests & updates model

and view accordingly
MVC Flow
1. User interacts with the View (e.g:
clicks a button to get weather).
2. The Controller processes the
user’s request.
3. The Controller communicates
with the Model to retrieve or
manipulate data.
4. The Model updates the data.
5. The View updates the interface
with the new data.
Advantages of MVC

Promotes code Easier debugging Scalable architecture

reusability and and testing for growing projects &
separation of concerns needs
MERN Basics
 What is MERN Stack?

MongoDB Express.js React.js Node.js

NoSQL Database that Lightweight backend Fast frontend library JavaScript runtime
stores data in JSON-like framework for handling for building dynamic environment that allows
documents. HTTP requests. user interfaces. server-side scripting.
Why MERN Stack?
Unified Language:
Entire stack uses JavaScript

Scalable Applications:
Suitable for single-page applications
and large-scale apps

Open Source Community:

Rich ecosystem and support
from developers worldwide

Rapid Development:
Streamlined tools and libraries
Where is MERN Used?

E-commerce platforms Social media Communication

Streamlined UI/UX with applications Real-time chat and
optimized data Real-time content collaboration tools,
processing viewing & interactions worldwide message sharing
MERN Terminologies
React Hooks:

Allows functional components to use

state and lifecycle methods
useState: Manages component state
useEffect: Handles side effects in
components
Replaces class component lifecycle
methods (older React)
Enables more readable and concise
code
MERN Terminologies
Express Middleware:

Functions that have access to

request and response objects
Can modify request/response cycle
Used for logging, authentication,
parsing requests
Allows chaining of processing
functions
Provides modularity in request
handling
MERN Terminologies
Mongoose Schemas:

Defines structure of documents in

MongoDB
Provides data validation
Supports default values
Creates a model for database
interactions
Enables type checking and custom
validations
MERN Terminologies
CORS (Cross-Origin Resource
Sharing)
Security mechanism for web
applications
Controls access to resources from
different domains
Prevents unauthorized cross-origin
requests
Configurable to allow specific origins
and methods
Essential for API security and
communication
MERN Terminologies
Virtual DOM

A lightweight in-memory
representation of the actual DOM
React uses the Virtual DOM to
optimize page rendering
Updates only the changed parts of
the UI efficiently
Improves application performance
and responsiveness
MERN Terminologies
Express Routing

Maps HTTP requests (GET, POST,

etc.) to specific endpoints
Simplifies API creation and request
handling
Supports route parameters and query
strings
Enables modular routing by
separating routes into files
 MERN-o-Game Live Demo

https://mern-o-game-frontend2.vercel.app/
Deep Dive into
MERN-o-Game
Project
Structure
Project
Architecture
Backend Breakdown

server.js: Entry point for

setting up the Express server
Backend Breakdown

routes/: Defines API

endpoints for interaction
Backend Breakdown

controllers/: Contains
logic for handling API
requests
Backend Breakdown

models/: Defines the

data structure and
schema (e.g., Mongoose
models for MongoDB)
Frontend Breakdown

index.js: Entry point for

rendering the React
application
Frontend Breakdown

App.js: Main React

component that serves as
the root of the application
Frontend Breakdown

components/: Contains
modular and reusable UI
components like headers,
buttons, and forms
Frontend Breakdown

React Hooks:
useState for managing
state
useEffect for handling
side effects like API calls
Frontend Breakdown

API Calls with Axios:

Simplifies fetching data
from the backend
Deployment
Guide
Backend Deployment (Render)
1. Create a new Web Service
2. Connect GitHub repository
3. Set root directory as `backend`
4. Set build (npm install) and start (node server.js)
commands
5. Configure environment variables (like MONGO_URI)

Frontend Deployment (Vercel)

1. Create new project
2. Select React framework
3. Set root directory as `frontend`
4. Configure environment variables (like
REACT_APP_API_URL)
Best Practices
 Writing Clean Code

Follow consistent Use comments and Modularize code

naming conventions for documentation for for reusability &
easier collaboration enhanced code clarity maintainability
Dev Tips
Use async/await for
cleaner asynchronous code

Implement comprehensive
error handling

Secure sensitive data with environment

variables (API Keys, Passwords)
Trivia Time
In React, what does useEffect primarily handle?
A. State management
B. Lifecycle methods and side effects
C. Data fetching from APIs
D. Component styling
Trivia Time
In React, what does useEffect primarily handle?
A. State management
B. Lifecycle methods and side effects
C. Data fetching from APIs
D. Component styling

Correct Answer: B. Lifecycle methods and side effects

Explanation: The useEffect hook in React replaces class component
lifecycle methods and handles side effects such as fetching data,
setting up subscriptions, or manually changing the DOM.
Trivia Time
What is the primary purpose of Express.js in the
MERN stack?
A. Database Management
B. Client-Side Rendering
C. Backend Server and API Framework
D. Component-Based UI Design
Trivia Time
What is the primary purpose of Express.js in the
MERN stack?
A. Database Management
B. Client-Side Rendering
C. Backend Server and API Framework
D. Component-Based UI Design
Correct Answer: C. Backend Server and API Framework
Explanation: Express.js is a minimalist web framework for Node.js
used to build RESTful APIs and handle server-side routing and
middleware.
Trivia Time
What is the default database schema enforcement
behavior of MongoDB?
A. Strict schema enforcement
B. No schema enforcement (schema-less)
C. Partial schema enforcement
D. Only JSON schema enforcement
Trivia Time
What is the default database schema enforcement
behavior of MongoDB?
A. Strict schema enforcement
B. No schema enforcement (schema-less)
C. Partial schema enforcement
D. Only JSON schema enforcement
Correct Answer: B. No schema enforcement (schema-less)
Explanation: MongoDB is a NoSQL database, meaning it is schema-
less by default. This allows for flexibility in how data is stored, but
developers can define schemas using Mongoose or other libraries if
needed.
Trivia Time
In Redux, what is the purpose of a "reducer"?
A. To fetch data from APIs
B. To define UI components
C. To specify how the state changes in response to actions
D. To manage middleware execution
Trivia Time
In Redux, what is the purpose of a "reducer"?
A. To fetch data from APIs
B. To define UI components
C. To specify how the state changes in response to actions
D. To manage middleware execution
Correct Answer: C. To specify how the state changes in response
to actions
Explanation: A reducer in Redux is a pure function that takes the
current state and an action, and returns the new state. It defines
the state transition logic in response to dispatched actions.
Sample Assignments
1. E-Commerce Store: Build a MERN app for browsing products, adding them to a cart, and
checking out.
2. Task Tracker: Create a MERN app to manage tasks with features like drag-and-drop
prioritization.
3. Movie Review Platform: Develop a MERN app to search movies, leave reviews, and rate them.
4. Fitness Tracker: Build a MERN app to log workouts, track progress, and set fitness goals.
5. Real-Time Chat App: Create a MERN app that supports user authentication and real-time chat
using WebSockets.
6. Expense Tracker: Develop a MERN app to log expenses, categorize them, and view monthly
summaries.
7. Job Application Tracker: Build a MERN app to track job applications, status updates, and
follow-ups.
8. Recipe Sharing Platform: Create a MERN app for users to post, share, and discover recipes.
9. Social Media Clone: Develop a MERN app where users can create profiles, post updates, and
interact with others.
10. Event Management App: Build a MERN app to create, manage, and RSVP to events.
Thank You!