Full Stack Development – BIS601 | Complete Course Portal
⚡ BIS601 · Full Stack Dev
Full StackDevelopment
Theory · Real-World Examples · Lab Programs · Exercises · Mini-Projects · Activities — all in one place for the MERN Stack.
▼ scroll
Course Overview
What You'll Master
From JavaScript basics to a fully deployed MERN application — a complete 16-week journey.
๐ Syllabus Coverage Map
Module 1 · JavaScript Basics & ES6+ 100%
Module 2 · DOM Manipulation & Events 100%
Module 3 · React Components & MERN Intro 100%
Module 4 · React State, Express & GraphQL 100%
Module 5 · MongoDB, Mongoose & Webpack 100%
Syllabus
5 Complete Modules
Expand any module to see full topics, syntax-highlighted code, and textbook references.
01
Basic JavaScript Statements · Variables · Arrays · Functions · OOP · ES6+
▼
Instructions & Statements var / let / const Data Types Type Coercion Template Literals Arrays & Methods String Methods Arrow Functions Objects & Prototypes Classes & OOP if/else / switch for / while / forEach Destructuring Spread & Rest Modules (import/export) Promises async / await Error Handling
// ── Variables & Types ──
const student = { name: "Priya" , marks: [85 , 90 , 78 , 92 ] };
const { name, marks } = student; // destructuring
const updated = { ...student, grade: "A" }; // spread operator
// ── Array Methods ──
const avg = marks.reduce ((a, b) => a + b, 0 ) / marks.length ;
const pass = marks.filter (m => m >= 80 );
const pct = marks.map (m => `${ m} %` );
console .log (`${ name} 's Average: ${ avg.toFixed (1 )} ` );
// ── Classes & OOP ──
class BankAccount {
constructor (owner, balance = 0 ) {
this .owner = owner;
this .balance = balance;
this .history = [];
}
deposit (amt) { this .balance += amt; this .history.push ({ type: 'credit' , amt }); }
withdraw (amt) {
if (amt > this .balance) throw new Error ('Insufficient balance' );
this .balance -= amt; this .history.push ({ type: 'debit' , amt });
}
getStatement () { return this .history; }
}
// ── Async/Await ──
const fetchUser = async (id) => {
try {
const res = await fetch (`/api/users/${ id} ` );
const data = await res.json ();
return data;
} catch (err) { console .error (err); }
};
๐ Text Book 1: Ch 2, 3, 4 | ๐ก Industry: Amazon cart logic, Paytm transaction history, Zomato menu filter
02
Document Object Model DOM Manipulation · Events · Delegation · Forms
▼
DOM Tree & Nodes querySelector / All getElementById createElement appendChild / prepend innerHTML vs textContent setAttribute / dataset classList API Click Events Input Events Form Submit Keyboard Events Mouse Events Event Bubbling & Capture Event Delegation Custom Events MutationObserver IntersectionObserver
// ── Event Delegation (efficient pattern) ──
const taskList = document .querySelector ('#tasks' );
taskList.addEventListener ('click' , (e) => {
const btn = e.target.closest ('button' );
if (!btn) return ;
const action = btn.dataset.action;
const li = btn.closest ('li' );
if (action === 'done' ) li.classList.toggle ('completed' );
if (action === 'delete' ) li.remove ();
});
// ── Dynamic DOM creation ──
function createTask (text) {
const li = document .createElement ('li' );
li.innerHTML = `
<span>${ text} </span>
<button data-action="done">✓</button>
<button data-action="delete">✕</button>
` ;
taskList.appendChild (li);
}
// ── Intersection Observer (Scroll animations) ──
const observer = new IntersectionObserver (entries => {
entries.forEach (e => e.target.classList.toggle ('visible' , e.isIntersecting));
}, { threshold: 0.1 });
document .querySelectorAll ('.reveal' ).forEach (el => observer.observe (el));
๐ Text Book 1: Ch 5, 6, 7, 13 | ๐ก Industry: Google Docs real-time edit, Gmail dynamic thread loading, Flipkart cart update
03
React Components & MERN Intro JSX · Props · Composition · Issue Tracker
▼
What is MERN Stack JSX Syntax Rules Functional Components Class Components Props Passing Children Props Default Props PropTypes Validation Component Composition Dynamic Composition Lists & Keys Conditional Rendering Controlled Inputs Uncontrolled Inputs Form Enhancement Issue Tracker App
// ── Reusable Status Badge ──
const Badge = ({ status }) => {
const styles = {
Open: { color: '#00e676' , bg: 'rgba(0,230,118,0.12)' },
Closed: { color: '#ff6b35' , bg: 'rgba(255,107,53,0.12)' },
Pending: { color: '#ffd740' , bg: 'rgba(255,215,64,0.12)' },
};
const s = styles[status] || {};
return <span style ={{ color: s.color, background: s.bg, padding:'2px 10px' , borderRadius:'20px' }}>{status}</span >;
};
// ── Issue Card – receives all data via props ──
const IssueCard = ({ id, title, description, status, priority, assignee }) => (
<div className ="issue-card" >
<h3 >#{id} {title}</h3 >
<p >{description}</p >
<div ><Badge status ={status} /> <span >P{priority}</span ></div >
<small >Assigned to: {assignee}</small >
</div >
);
// ── IssueTracker – composes multiple cards ──
const IssueTracker = ({ issues, filterStatus }) => {
const filtered = filterStatus
? issues.filter (i => i.status === filterStatus)
: issues;
return (
<div >
<h2 >Issues ({filtered.length })</h2 >
{filtered.map (i => <IssueCard key ={i.id} {...i} />)}
</div >
);
};
๐ Text Book 2: Ch 1, 2, 3 | ๐ก Industry: GitHub Issues, Jira board, Freshdesk ticket system
04
React State & Express/GraphQL Hooks · REST API · GraphQL · Validation
▼
useState Hook useEffect Hook useReducer useContext Custom Hooks Async State Init Lifting State Up State vs Props Express Setup Express Routing Middleware REST CRUD APIs GraphQL Schema Query & Mutation Resolvers Apollo Server Input Validation Error Handling
React Hooks + Express REST Copy // ── Custom hook for data fetching ──
function useFetch (url) {
const [data, setData ] = useState (null );
const [loading, setLoading ] = useState (true );
const [error, setError ] = useState (null );
useEffect (() => {
fetch (url)
.then (r => { if (!r.ok) throw new Error (r.status); return r.json (); })
.then (d => { setData (d); setLoading (false ); })
.catch (e => { setError (e.message); setLoading (false ); });
}, [url]);
return { data, loading, error };
}
// ── Express REST API ──
const express = require ('express' );
const router = express.Router ();
router.get ('/products' , async (req, res) => {
const { category, sort, page = 1 } = req.query;
const filter = category ? { category } : {};
const products = await Product.find (filter)
.sort (sort || '-createdAt' )
.skip ((page - 1 ) * 10 ).limit (10 );
const total = await Product.countDocuments (filter);
res.json ({ products, total, pages: Math .ceil (total/10 ) });
});
router.post ('/products' , authenticate , async (req, res) => {
const product = new Product (req.body);
await product.save ();
res.status (201 ).json (product);
});
๐ Text Book 2: Ch 4, 5 | ๐ก Industry: Swiggy order dashboard, Meesho seller analytics, OLX listing management
05
MongoDB & Webpack / Modularization CRUD · Mongoose · Aggregation · Bundling
▼
Documents & Collections BSON Types MongoDB Shell insertOne / insertMany find / findOne Projections updateOne / $set deleteOne / deleteMany Query Operators Aggregation Pipeline $match $group $sort $lookup (joins) Mongoose Schema Mongoose Models Validation & Hooks Webpack Config Loaders & Plugins Code Splitting HMR Production Build
// ── Mongoose Schema with hooks & virtuals ──
const productSchema = new mongoose.Schema ({
name: { type: String , required: [true , 'Name required' ], trim: true },
price: { type: Number , required: true , min: [0 , 'Price cannot be negative' ] },
category: { type: String , enum: ['Electronics' ,'Clothing' ,'Food' ,'Books' ] },
stock: { type: Number , default: 0 },
ratings: [{ user: String , stars: Number , review: String }]
}, { timestamps: true });
// Virtual: average rating
productSchema.virtual('avgRating' ).get (function () {
if (!this .ratings.length) return 0 ;
return (this .ratings.reduce ((s,r) => s+r.stars, 0 ) / this .ratings.length).toFixed (1 );
});
// ── Aggregation: Sales by category ──
const report = await Order.aggregate ([
{ $match : { status: 'delivered' , createdAt: { $gte: new Date ('2024-01-01' ) }}},
{ $unwind : '$items' },
{ $group : {
_id: '$items.category' ,
revenue: { $sum : { $multiply : ['$items.price' , '$items.qty' ] }},
orders: { $sum : 1 }
}},
{ $sort : { revenue: -1 } }
]);
๐ Text Book 2: Ch 6, 7 | ๐ก Industry: Meesho seller reports, Flipkart inventory, BigBasket product catalogue
Lab Programs
8 Hands-On Experiments
Progressive lab experiments from Hello World to a full MERN CRUD application.
# Experiment Title Objective Tech Stack
01
JavaScript Hello World & Basics Write and run JS programs using variables, conditionals, loops, and functions. Solve problems: factorial, Fibonacci, palindrome check. HTML JavaScript Browser Console
02
DOM Manipulation – Interactive Todo App Build a fully functional Todo application. Add tasks via form, mark complete with click, delete tasks, persist using localStorage. Implement search/filter. HTML CSS DOM API localStorage
03
React Components – Student Card System Build reusable StudentCard and StudentList components using props. Include name, marks, subject list, grade badge. Filter by pass/fail dynamically. React JSX Props CDN React
04
React State – Shopping Cart Create a product listing page with Add to Cart functionality. Manage cart state with useState. Show item count, total price, and remove items. React useState useEffect
05
Express REST API – Product Management Build a Node/Express REST API for Products: GET all, GET by ID, POST create, PUT update, DELETE. Test with Postman. Add input validation. Node.js Express Postman JSON
06
MongoDB CRUD – Student Database Connect MongoDB with Mongoose. Create Student schema. Implement full CRUD: add students, query by marks/name, update records, delete, and run aggregation for averages. MongoDB Mongoose Node.js
07
GraphQL API – Issue Tracker Build a GraphQL server for issues. Define typeDefs: Issue type, Query (issues, issue), Mutation (createIssue, updateStatus, deleteIssue). Connect MongoDB as data source. GraphQL Apollo MongoDB
08
Full MERN App – Blog Platform Complete MERN application: React frontend with create/read/delete posts, Express backend with JWT auth, MongoDB storage. Deploy with Webpack production build. MongoDB Express React Node JWT Webpack
Industry Context
Real-World Examples
Every concept maps to a real app used by millions of people in India and worldwide.
⚡ JavaScript
๐ DOM
⚛️ React
๐ Express
๐ MongoDB
๐
E-Commerce Cart (Flipkart / Amazon Style) JavaScript OOP & Array methods power shopping cart logic
๐ Scenario: When you click "Add to Cart" on Flipkart, JavaScript OOP manages the cart — adding/removing items, updating quantities, applying coupons, and computing totals all in memory before syncing to the server.
ShoppingCart – JavaScript OOP Copy class ShoppingCart {
constructor () { this .items = []; this .coupon = null ; }
add (product, qty = 1 ) {
const found = this .items.find (i => i.id === product.id);
found ? found.qty += qty : this .items.push ({ ...product, qty });
this .render ();
}
remove (id) { this .items = this .items.filter (i => i.id !== id); this .render (); }
couponApply (code) {
const codes = { SAVE10: 0.1 , SAVE20: 0.2 , FLAT50: 50 };
this .coupon = codes[code] ?? null ;
}
getTotal () {
const sub = this .items.reduce ((s, i) => s + i.price * i.qty, 0 );
if (!this .coupon) return sub;
return this .coupon < 1 ? sub * (1 - this .coupon) : sub - this .coupon;
}
render () {
document .querySelector ('#cart-count' ).textContent = this .items.length ;
document .querySelector ('#cart-total' ).textContent = `₹${ this .getTotal ().toLocaleString ()} ` ;
}
}
const cart = new ShoppingCart ();
cart.add ({ id: 1 , name: 'iPhone 15' , price: 79999 });
cart.couponApply ('SAVE10' );
console .log (cart.getTotal ()); // ₹71,999
๐
Debounced Search (Swiggy / Zomato Style) Prevents API flood on every keystroke
๐ Scenario: Swiggy waits 300ms after you stop typing before searching restaurants — this "debounce" prevents 30+ API calls per second and saves server costs.
const debounce = (fn, ms) => {
let timer;
return (...args) => { clearTimeout (timer); timer = setTimeout (() => fn (...args), ms); };
};
const searchAPI = async (query) => {
const r = await fetch (`/api/restaurants?q=${ query} ` );
const data = await r.json ();
renderResults (data);
};
const debouncedSearch = debounce (searchAPI, 300 );
document .querySelector ('#search' ).addEventListener ('input' , e => debouncedSearch (e.target.value));
✅
Live Kanban Board (Trello / Jira Style) Drag-and-drop DOM manipulation
๐ Scenario: Trello uses drag-and-drop DOM events to move task cards between "To Do / In Progress / Done" columns. Each drag operation updates the DOM instantly, then syncs to the database.
// Cards are draggable
document .querySelectorAll ('.card' ).forEach (card => {
card.draggable = true ;
card.addEventListener ('dragstart' , e => {
e.dataTransfer.setData ('text/plain' , card.id);
card.classList.add ('dragging' );
});
card.addEventListener ('dragend' , () => card.classList.remove ('dragging' ));
});
// Columns accept drops
document .querySelectorAll ('.column' ).forEach (col => {
col.addEventListener ('dragover' , e => e.preventDefault ());
col.addEventListener ('drop' , e => {
const cardId = e.dataTransfer.getData ('text/plain' );
const card = document .getElementById (cardId);
col.appendChild (card);
updateStatusAPI (cardId, col.dataset.status); // sync to DB
});
});
๐
Live Order Dashboard (Zomato Restaurant Partner) useReducer + real-time state management
๐ Scenario: Zomato's restaurant partner app uses React + Socket.io. When a new order arrives, the state updates instantly — the dashboard re-renders to show the new order without any page refresh.
React useReducer – Order Dashboard Copy const orderReducer = (state, action) => {
switch (action.type) {
case 'NEW_ORDER' : return [action.order, ...state];
case 'ACCEPT' : return state.map (o => o.id===action.id ? {...o,status:'Preparing' }:o);
case 'READY' : return state.map (o => o.id===action.id ? {...o,status:'Ready' }:o);
case 'DISPATCHED' : return state.map (o => o.id===action.id ? {...o,status:'On the way' }:o);
default : return state;
}
};
function Dashboard () {
const [orders, dispatch] = useReducer (orderReducer, []);
useEffect (() => {
socket.on ('new-order' , order => dispatch({ type: 'NEW_ORDER' , order }));
}, []);
const pending = orders.filter (o => o.status === 'Pending' );
const revenue = orders.reduce ((s, o) => s + o.total, 0 );
return (
<div >
<h1 >Orders: {orders.length} | Revenue: ₹{revenue} | Pending: {pending.length}</h1 >
{orders.map (o => <OrderCard key ={o.id} order ={o} dispatch ={dispatch} />)}
</div >
);
}
๐
JWT Auth API (PhonePe / BHIM Style) Express middleware + JWT token flow
๐ Scenario: When you log into PhonePe with your PIN, the Express backend validates credentials, issues a JWT token, and all subsequent API calls (balance check, payments) carry this token to prove identity.
const authenticate = (req, res, next) => {
const token = req.headers.authorization?.split (' ' )[1 ];
if (!token) return res.status (401 ).json ({ error: 'No token provided' });
try { req.user = jwt.verify (token, process.env.JWT_SECRET); next (); }
catch { res.status (401 ).json ({ error: 'Invalid or expired token' }); }
};
app.post ('/login' , async (req, res) => {
const { phone, pin } = req.body;
const user = await User.findOne ({ phone });
if (!user || !await bcrypt.compare (pin, user.hashedPin))
return res.status (400 ).json ({ error: 'Invalid credentials' });
const token = jwt.sign ({ id: user._id }, process.env.JWT_SECRET, { expiresIn: '7d' });
res.json ({ token });
});
app.get ('/wallet/balance' , authenticate, async (req, res) => {
const wallet = await Wallet.findOne ({ user: req.user.id });
res.json ({ balance: wallet.balance });
});
๐ฆ
Sales Analytics (Meesho Seller Portal Style) MongoDB aggregation pipeline for business reports
๐ Scenario: Meesho's seller dashboard uses MongoDB aggregation to instantly compute total revenue by product category, daily order counts for the last 30 days, and top-performing products — all in a single optimized query.
MongoDB Aggregation Pipeline Copy const salesReport = await Order.aggregate ([
{ $match : {
status: 'delivered' ,
createdAt: { $gte: new Date (Date .now () - 30 *24 *3600 *1000 ) }
}},
{ $unwind : '$items' },
{ $group : {
_id: { cat: '$items.category' , day: { $dateToString : { format:'%Y-%m-%d' , date:'$createdAt' }}},
revenue: { $sum : { $multiply : ['$items.price' , '$items.qty' ] }},
units: { $sum : '$items.qty' },
orders: { $addToSet : '$_id' }
}},
{ $sort : { revenue: -1 } },
{ $limit : 20 }
]);
// → Returns top 20 category+day combos by revenue in last 30 days
Practice Problems
30+ Graded Exercises
Easy → Medium → Hard progression across all 5 modules.
Module 1
Module 2
Module 3
Module 4
Module 5
Easy 1. Grade Calculator Accept 5 subject marks, compute average, find highest/lowest, assign grade (A/B/C/D/F), and print a formatted report card.
Arrays Math.max conditions
Easy 2. Palindrome & Anagram Write isPalindrome() and isAnagram() functions. Handle spaces, case, and special characters. Test with sample words.
Strings sort regex
Easy 3. Number Guessing Game Generate random 1–100 number. Accept guesses, respond "Too High" / "Too Low" / "Correct!". Count attempts. Allow replay.
Math.random while prompt
Medium 4. Bank Account OOP Create BankAccount class: deposit(), withdraw() with balance check, getStatement(), and compound interest calculator using closure.
Classes closures OOP
Medium 5. Student Array Pipeline Given 20 students array (name, grade, marks): group by grade, find top 5, compute subject averages — using only map/filter/reduce.
map/filter/reduce objects
Hard 6. Retry Fetch with Backoff Simulate async API calls that fail randomly. Implement retry with exponential backoff (1s, 2s, 4s). Show loading/error/success states.
Promises async/await recursion
Easy 7. Image Carousel Build a slideshow with prev/next, auto-play (3s), dot indicators, and keyboard arrow key support. Pause on hover.
DOM setInterval keyboard events
Easy 8. Color Picker Tool Create a color palette grid. On hover show hex code tooltip. On click copy to clipboard. Show "Copied!" animation.
DOM classList Clipboard API
Medium 9. Live Form Validator Real-time validation: email format, password strength meter (8+ chars / number / special), confirm match. Block submit on error.
Regex input events live feedback
Medium 10. Drag-and-Drop Kanban 3-column board (Todo/Doing/Done). Drag cards between columns. Count per column dynamically. Persist to localStorage.
dragstart drop events localStorage
Hard 11. Canvas Drawing App Paint-like app with freehand, shapes (rect/circle/line), colors, brush sizes, undo/redo stack, eraser, and PNG export.
Canvas API mouse events history stack
Hard 12. Infinite Scroll Feed Simulate an Instagram-style feed. Load 10 items initially, detect scroll bottom with IntersectionObserver, lazy-load more items.
IntersectionObserver DOM async
Easy 13. Profile Card Component Build reusable ProfileCard with name, role, avatar, skills[] props. Toggle "Follow" button that updates follower count state.
Props JSX component design
Medium 14. Restaurant Menu Filter Menu with categories, veg/non-veg filter, price range slider. All filtering via controlled React components and props.
Controlled inputs Conditional render
Hard 15. Multi-Step Form Wizard 3-step registration: Personal → Address → Review. Progress bar, per-step validation, back/next navigation, final summary preview.
Component hierarchy state props
Easy 16. Weather Widget Fetch from OpenWeatherMap API using useEffect. Show temp, humidity, wind, icon. Auto-refresh every 5 min. Show loading skeleton.
useEffect fetch API async state
Medium 17. Cart with Context API Full cart using useContext + useReducer. Add/remove/update qty, apply discount, persist in localStorage. Global state accessible anywhere.
useContext useReducer localStorage
Hard 18. GraphQL Blog API Apollo Server with Post & User types. Queries: posts, post(id). Mutations: createPost, updatePost, deletePost, addComment. MongoDB backend.
GraphQL Apollo MongoDB
Easy 19. MongoDB Shell CRUD Using mongo shell: create students DB, insert 10 records, query marks>80, update, delete, sort/count. Write all commands documented.
MongoDB Shell CRUD queries
Medium 20. Blog Schema with Refs Design Post and Comment schemas with references. Use populate() to get comments with posts. Add indexes, timestamps, and virtuals.
Mongoose refs populate
Hard 21. Sales Analytics Dashboard MongoDB aggregation: revenue by category, daily totals for last 30 days, top 5 products, avg order value, $lookup for user details.
$group $match $lookup $facet
Build Real Apps
6 Mini Projects
End-to-end MERN projects. Each one maps to a real-world industry application.
1. MERN Blog Platform Full-featured blog with user authentication, Markdown posts, nested comments, tags, search, and pagination.
React Express MongoDB JWT Webpack
JWT registration & login Create / Edit / Delete posts (Markdown) Nested comments with likes Category filter + full-text search Profile page with post history Difficulty: ★★★☆☆
2. E-Commerce Store Complete online store with product catalogue, cart, order management, and an admin panel for inventory control.
React Redux/Context Express MongoDB Stripe
Product listing with filters & sorting Cart with quantity management Order placement & tracking Admin: add/edit products & stock Payment gateway (mock / Stripe) Difficulty: ★★★★☆
3. Real-Time Chat App WhatsApp-style chat with private messages, group rooms, online status, and message history using Socket.io.
React Socket.io Express MongoDB
Real-time messaging (Socket.io) Group creation & management Online / offline status Message history from MongoDB Image sharing support Difficulty: ★★★★☆
4. Kanban Project Manager Trello-like board: drag-and-drop cards, assign members, deadlines, priority labels, and activity feed.
React DnD Kit Express MongoDB
Drag-and-drop between columns Task assignment to team members Due dates with overdue alerts Labels, comments, attachments Activity log per task Difficulty: ★★★☆☆
5. Food Delivery App Swiggy-style app: restaurant listing, menu browsing, order placement, live tracking UI, and review system.
React GraphQL Express MongoDB
Location-based restaurant listing Category menu with filter Cart and order placement Live order status tracker Ratings & review system Difficulty: ★★★★★
6. Student Analytics Portal College ERP module: marks entry, attendance tracking, grade charts, subject analytics, and role-based access.
React Recharts Express MongoDB
Marks entry and CIE computation Attendance with % alerts Bar/line/pie charts (Recharts) Export reports as PDF / Excel Role: Admin / Faculty / Student Difficulty: ★★★★☆
Classroom & Lab
12 Learning Activities
Collaborative, competitive, and project-based activities that make concepts stick.
๐
Code Challenge Sprint Weekly 30-min timed challenge on just-taught topics. Top 3 solutions get live code review.
Instructor posts 3 problems on projector Students solve individually Live review of top 3 solutions Class votes best solution ⏱ 45 min ๐
Pair Programming Driver codes, Navigator guides. Switch roles every 15 min. Build a small feature together.
Pair mixed-ability students Driver codes, navigator reviews Switch roles at 15-min mark Both explain their decisions ⏱ 60 min ๐
Bug Hunt Competition Students receive code with 5 intentional bugs. First team to find and fix all bugs wins.
Distribute buggy code files Teams of 2 race to find bugs Explain each bug to class Discuss why bug was introduced ⏱ 30 min ๐ค
5-Minute Live Demos Each student picks one concept and explains it in 5 minutes with live code. No slides allowed.
Draw topics randomly at start 5-min live coding demo (strict timer) 2-min Q&A from classmates Peer evaluation form ⏱ 7 min/student ๐จ
UI Clone Challenge Replicate a shown UI screenshot (Amazon/Google page) using HTML+CSS+JS. Compare with original.
Show screenshot for 10 seconds Students build from memory (1 hr) Compare side-by-side with original Award points for accuracy ⏱ 75 min ๐งฉ
Component Jigsaw Each team builds one React component. Teams combine all components into a single working page.
Assign Header/Sidebar/Card/Footer to teams Define props contracts together Build independently then integrate Debug combined page as class ⏱ 90 min ๐ฒ
API Design Workshop Groups design a REST API for a given domain (hospital/library). Define all endpoints before coding.
Assign real-world domain to teams Design endpoints on whiteboard Peer review of each design Implement one endpoint per team ⏱ 60 min ๐ฆ
MongoDB Schema Design Design optimal MongoDB schemas for a real scenario. Decide embedded vs referenced documents.
Present hospital/library scenario Teams sketch document structure Discuss embed vs reference trade-offs Insert sample data and query ⏱ 60 min ๐ด
Live Code Review Students share screen and walk through their lab solution. Class suggests improvements live.
Student presents code line-by-line Class asks "what if" questions Refactor one section live together Document best practices found ⏱ 20 min/person ๐
48-Hour Hackathon Weekend: teams of 2–3 build a complete MERN app. Present to faculty + external judge panel.
Form teams and choose domain 48 hours to build prototype 5-min demo + 2-min Q&A to panel Awards: Best UI / Best Backend / Innovation ⏱ 48 hours ๐
State Flow Diagramming Draw React component trees and trace how state flows. Find where to lift state for shared usage.
Start with app wireframe on whiteboard Identify component boundaries Trace props/state with arrows Implement planned architecture ⏱ 45 min ๐
API Integration Relay Teams connect 3 free APIs (Weather/News/Currency). First team to show all 3 styled on a page wins.
Give list of free public APIs Teams race to fetch and display Bonus for error handling Bonus for best-styled page ⏱ 45 min
Semester Plan
16-Week Schedule
Week 1–2
JS Basics: Variables, Types, Arrays, Functions
Activities: Live coding · Exercise set 1–3 · Pair programming on array methods
Week 3–4
Advanced JS: OOP, Promises, async/await, ES6+
Activities: Bug Hunt on closures · Lightning talks on Promises · BankAccount OOP exercise
Week 5–6
DOM Manipulation, Events, Forms
Activities: UI Clone Challenge · Todo App lab · Event Delegation exercise
Week 7–8
React Components, Props, JSX — CIE Test 1
Activities: Component Jigsaw · Issue Tracker lab · Internal Test 1 (Modules 1–2)
Week 9–10
React State, Hooks, useEffect, Custom Hooks
Activities: State Flow Diagramming · Weather API lab · Order Dashboard useReducer exercise
Week 11–12
Express REST API, Middleware & GraphQL
Activities: API Design Workshop · Postman testing · REST API relay race
Week 13–14
MongoDB, Mongoose, Aggregation
Activities: Schema Design lab · MongoDB shell practice · Full MERN CRUD app (Lab 8)
Week 15–16
Webpack, Deployment & Mini Project Demos — CIE Test 2
Activities: 48-hr Hackathon · Project presentations · Code Review sessions · Internal Test 2 (Modules 3–5)
Self Assessment
Knowledge Quiz Test your understanding across all modules. 10 questions on MERN concepts.
Learning Goals
Course Outcomes What you'll be able to do after successfully completing BIS601.
CO1
Build JavaScript Applications Write clean, modular JavaScript using ES6+ features, OOP, and async patterns to solve real-world problems.
CO2
Develop Interactive Web Pages Manipulate the DOM, handle user events, and build dynamic interfaces without any external framework.
CO3
Create React Applications Design component-based UIs with proper state management, hooks, and component composition patterns.
CO4
Design RESTful & GraphQL APIs Build backend APIs with Express, implement GraphQL queries/mutations, and handle authentication with JWT.
CO5
Manage Data with MongoDB Design schemas with Mongoose, perform CRUD operations, and write aggregation pipelines for analytics.
CO6
Deploy Full-Stack MERN Applications Connect all MERN layers, bundle with Webpack, and deploy a working full-stack web application.
Evaluation
Assessment Structure
๐ CIE – Continuous Internal Evaluation
Total CIE Marks 50 Marks
Internal Tests (2 × 12.5) 25 Marks
Assignments / Project 25 Marks
Test 1 – Modules 1 & 2 After Week 8
Test 2 – Modules 3, 4 & 5 After Week 15
Minimum to Pass CIE 20 / 50
๐ SEE – Semester End Examination
Total SEE Marks 50 Marks
Duration 3 Hours
Total Questions 10 Questions
Questions per Module 2 per Module
Attempt any 5 Questions (1/module)
Minimum to Pass SEE 18 / 50
✅ Overall Passing Criteria: Minimum 40 marks out of 100 (CIE + SEE combined). Must pass both components individually.
Study Material
Books & Online Resources
๐ Prescribed Textbooks
Text Book 1
JavaScript & jQuery: Interactive Front-End Web Development
Jon Duckett · Wiley · 2014
Text Book 2
Pro MERN Stack: Full Stack Web App Development
Vasan Subramanian · Apress · 2nd Ed · 2019
⚡ BIS601 · Full Stack Development
Complete Academic Portal · MERN Stack · Semester 6 · 4 Credits
Modules · Lab Programs · Real-World Examples · Exercises · Mini Projects · Activities · Quiz
↑
