Web Programming-II Notes
Subject Overview
The second course in the Full Stack Development elective stream, covering full-stack JavaScript development — Node.js and Express.js on the backend with RESTful APIs and MongoDB/
Subject at a glance
3
Units
28
Topics
2
Credits
3
Infographics
Unit-wise Syllabus
3 units — open any unit for detailed topic-wise notes, diagrams and important exam questions
- Introduction to full-stack JavaScript
- Node.js setup/npm/modules/REPL/file system
- asynchronous programming (callbacks, promises, async/await)
- Express.js server setup
- routing
- middleware
- HTTP methods
- RESTful API design
- JSON and Postman
- CRUD operations with MongoDB/MySQL
Callbacks
Function passed to run later
Can nest deeply ('callback hell')
Promises
.then() and .catch() chains
Flatter and easier to handle errors
async/await
Write async code like normal code
Most readable
Study guide
This unit builds the backend of a full-stack JavaScript application: Node.js setup, npm, modules, the REPL and file system, asynchronous programming with callbacks, promises and async/await, Express.js server setup, routing, middleware and HTTP methods, RESTful API design, JSON and Postman, and CRUD operations with MongoDB or MySQL. Understanding async/await removes most beginner confusion in Node.js.
- Introduction to SPAs and React.js
- JSX and the virtual DOM
- functional vs class components
- props and state
- event handling and conditional rendering
- lists and keys
- React Router
- forms and controlled components
- useState/useEffect hooks
- fetching API data
- Component
- A reusable piece of UI
- Props
- Data passed into a component
- State
- Data a component owns and can change
- useState
- Hook to add state
- useEffect
- Hook to run side effects such as API calls
Study guide
React is the most popular library for building user interfaces. You study single-page applications, JSX and the virtual DOM, functional and class components, props and state, event handling and conditional rendering, lists and keys, React Router, forms and controlled components, the useState and useEffect hooks and fetching data from an API. Build a small app with several components to make the ideas stick.
- Connecting React frontend with Node/Express API
- CORS
- form submission and API requests
- JWT authentication
- login/signup workflow
- full-stack project structure and best practices
- deployment to Netlify/Render/Vercel/Heroku
- environment variables
- 1Login
User sends credentials
- 2Issue token
Server returns a signed JWT
- 3Call API
Client sends the token with requests
- 4Verify
Server checks the token
- 5Respond
Returns protected data
Study guide
Finally you connect the two halves: linking a React frontend to a Node and Express API, CORS, form submission and API requests, JWT authentication, login and signup workflows, project structure and best practices, deployment to Netlify, Render, Vercel or Heroku, and environment variables. Never commit secrets such as database passwords; use environment variables.
Why Web Programming-II Matters
The MERN stack (MongoDB, Express, React, Node) is one of the most in-demand skill sets for web developers, and a deployed full-stack project is among the strongest items you can show an employer.
How to Prepare for Web Programming-II
- Build and deploy at least one full-stack project with login.
- Learn the useState and useEffect hooks thoroughly.
- Test every API route with Postman before connecting the frontend.
- Keep secrets in environment variables, never in code.
Web Programming-II: Frequently Asked Questions
What is the MERN stack?
MERN stands for MongoDB, Express.js, React and Node.js, a popular set of JavaScript technologies for building full-stack web applications.
What is JWT authentication?
A JSON Web Token (JWT) is a signed token the server issues after login, which the client sends with later requests to prove who they are.