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!
