Unit 1: Full-stack MERN application development
Web Programming-II Laboratory notes · PTU syllabus (UGDSE304)
On this page
Unit summary
This lab builds full-stack MERN (MongoDB, Express, React, Node) applications: a REST API tested in Postman, React apps with routing and public APIs, a full-stack mini project, and deployment.
After this unit you can
- Build and test a REST API connected to MongoDB
- Create React apps with components, routing and API calls
- Build a full-stack mini project with user data
- Deploy the frontend and backend
PTU syllabus topics
- Building a REST API (e.g. Todo List API)
- connecting the API to MongoDB and testing with Postman
- creating a React app (e.g. weather or movie search app)
- multi-page navigation with React Router
- consuming a public API
- a full-stack mini project (blog system, task tracker or notes app)
- deploying frontend and backend
- storing user data and rendering dynamic views
MongoDB
Database
Express
Web framework and API routes
React
Front-end user interface
Node.js
JavaScript runtime on the server
Topic 1
REST API with MongoDB
javascriptconst mongoose = require("mongoose");
mongoose.connect(process.env.MONGO_URI);
const Todo = mongoose.model("Todo", { title: String, done: { type: Boolean, default: false } });
app.get("/todos", async (req, res) => res.json(await Todo.find()));
app.post("/todos", async (req, res) => res.status(201).json(await Todo.create(req.body)));
app.patch("/todos/:id", async (req, res) =>
res.json(await Todo.findByIdAndUpdate(req.params.id, req.body, { new: true })));
app.delete("/todos/:id", async (req, res) => { await Todo.findByIdAndDelete(req.params.id); res.sendStatus(204); });Test every route in Postman and save them in a collection.
Topic 2
React apps with public APIs and routing
- Weather or movie search app: a search box (controlled input), fetch from a public API (OpenWeather, OMDb) in an event handler or
useEffect, and display results as cards; handle loading and error states. - Multi-page navigation:
BrowserRouter,Routes,RouteandLinkfor Home, Search and About pages.
Topic 3
Full-stack mini project
- 1
Choose
Blog, task tracker or notes app
- 2
Design the data model and API
- 3
Build and test the backend
- 4
Build React pages and forms
- 5
Add login with JWT
- 6
Store and display each user's own data
- 7
Deploy
| Part | Deploy to |
|---|---|
| React frontend | Netlify or Vercel |
| Express backend | Render or Railway |
| Database | MongoDB Atlas |
Exam tip
Set the API base URL with an environment variable in React so the same code works locally and in production.
Key terms
- MERN
- MongoDB, Express, React and Node.js stack
- Mongoose
- A library for modelling MongoDB data in Node
- Postman collection
- A saved group of API requests
- Loading state
- UI shown while data is being fetched
Quick revision
- Mongoose: find, create, findByIdAndUpdate, findByIdAndDelete.
- Test APIs in Postman before connecting React.
- Handle loading and errors in React fetches.
- Frontend → Netlify/Vercel; backend → Render; DB → Atlas.
Important exam questions
Practice questions written to the PTU exam pattern for this unit's syllabus: short answers (Section A style) and long answers (Sections B and C style).
Short-answer questions
- Q1.What does MERN stand for?
- Q2.What is Mongoose?
- Q3.Why test an API in Postman before building the frontend?
- Q4.How do you show a loading state in React?
Long-answer questions
- Q1.Build a Todo REST API with Express and MongoDB and test it in Postman.
- Q2.Build a React movie or weather search app using a public API.
- Q3.Describe the full-stack mini project you built and how you deployed it.
Stuck on this unit?
Message SBS on WhatsApp for help with Web Programming-II Laboratory, or to ask about studying BCA at Synetic.