Web Development

Complete Course Notes & Programs

Course Assessment Breakdown

30 Marks — Project
10 Marks — Attendance
10 Marks — Assignments
50 Marks — Final Paper

Topics Covered
• React JS — Components, Props, State
• Next JS — Routes & File-based Routing
• MongoDB — Database Operations
• Tailwind CSS — Utility-first Styling
• TypeScript — Arrays, Conditions, Loops, Objects
MODULE 1: TypeScript

1.1 Arrays
An array holds multiple values of the same type.
// Declare arrays
const fruits: string[] = ["Apple", "Banana", "Mango"];
const scores: number[] = [95, 87, 72, 100];

// Access elements
[Link](fruits[0]); // Apple
[Link]([Link]); // 4

// Push & pop

[Link]("Orange");
[Link]();

// Loop over array

for (const fruit of fruits) {
[Link](fruit);
}

// Array methods
const doubled = [Link](s => s * 2);
const passed = [Link](s => s >= 75);
const total = [Link]((acc, s) => acc + s, 0);
[Link](doubled, passed, total);

1.2 Conditions (if / else / switch)

// if-else
function getGrade(marks: number): string {
if (marks >= 90) return "A+";
else if (marks >= 75) return "A";
else if (marks >= 60) return "B";
else if (marks >= 50) return "C";
else return "Fail";
}
[Link](getGrade(88)); // A

// Ternary
const status = (marks: number) => marks >= 50 ? "Pass" : "Fail";
[Link](status(45)); // Fail

// switch
function getDayName(day: number): string {
switch (day) {
case 1: return "Monday";
case 2: return "Tuesday";
case 3: return "Wednesday";
default: return "Unknown";
}
}
[Link](getDayName(2)); // Tuesday
1.3 Loops
// for loop
for (let i = 1; i <= 5; i++) {
[Link]("Count:", i);
}

// while loop
let n = 1;
while (n <= 10) {
[Link](n);
n++;
}

// for...of (arrays)
const colors: string[] = ["Red", "Green", "Blue"];
for (const color of colors) {
[Link](color);
}

// for...in (object keys)

const person = { name: "Ali", age: 22 };
for (const key in person) {
[Link](key, ":", (person as any)[key]);
}

1.4 Objects & Interfaces

// Interface definition
interface Student {
id: number;
name: string;
marks: number;
grade?: string; // optional
}

// Create object
const student: Student = {
id: 1,
name: "Sara",
marks: 88,
};

// Function with interface param

function printStudent(s: Student): void {
[Link](`ID: ${[Link]} | Name: ${[Link]} | Marks: ${[Link]}`);
}
printStudent(student);

// Array of objects
const students: Student[] = [
{ id: 1, name: "Ali", marks: 75 },
{ id: 2, name: "Sara", marks: 90 },
{ id: 3, name: "John", marks: 55 },
];
 // Filter passing students
const passing = [Link](s => [Link] >= 50);
[Link](passing);

1.5 Functions & Type Annotations

// Basic typed function
function add(a: number, b: number): number {
return a + b;
}

// Arrow function
const multiply = (x: number, y: number): number => x * y;

// Optional & default params

function greet(name: string, greeting: string = "Hello"): string {
return `${greeting}, ${name}!`;
}
[Link](greet("Ali")); // Hello, Ali!
[Link](greet("Sara","Hi")); // Hi, Sara!

// Rest parameters
function sumAll(...nums: number[]): number {
return [Link]((a, b) => a + b, 0);
}
[Link](sumAll(1, 2, 3, 4, 5)); // 15
MODULE 2: React JS

2.1 What is React?

React is a JavaScript library for building user interfaces. It uses a component-based architecture where each UI
piece is an independent, reusable component.

2.2 Functional Components

// [Link]
import React from 'react';

function HelloWorld() {
return (
<div>
<h1>Hello, World!</h1>
<p>This is my first React component.</p>
</div>
);
}
export default HelloWorld;

2.3 Props (Properties)

Props allow you to pass data from a parent component to a child component.
// [Link] — Child component
interface CardProps {
title: string;
description: string;
price: number;
}

function Card({ title, description, price }: CardProps) {

return (
<div className="card">
<h2>{title}</h2>
<p>{description}</p>
<strong>Price: ${price}</strong>
</div>
);
}

// [Link] — Parent component

function App() {
return (
<div>
<Card title="Laptop" description="Fast laptop" price={999} />
<Card title="Headphone" description="Noise cancel" price={149} />
</div>
);
}
export default App;

2.4 State with useState

// [Link]
 import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState<number>(0);

return (
<div>
<h1>Count: {count}</h1>
<button onClick={() => setCount(count + 1)}>Increment</button>
<button onClick={() => setCount(count - 1)}>Decrement</button>
<button onClick={() => setCount(0)}>Reset</button>
</div>
);
}
export default Counter;

2.5 State — Todo List App

// [Link]
import React, { useState } from 'react';

interface Todo {
id: number;
text: string;
done: boolean;
}

function TodoApp() {
const [todos, setTodos] = useState<Todo[]>([]);
const [input, setInput] = useState('');

const addTodo = () => {

if (![Link]()) return;
setTodos([...todos, { id: [Link](), text: input, done: false }]);
setInput('');
};

const toggle = (id: number) =>

setTodos([Link](t => [Link] === id ? { ...t, done: ![Link] } : t));

const remove = (id: number) =>

setTodos([Link](t => [Link] !== id));

return (
<div>
<h1>Todo List</h1>
<input value={input} onChange={e => setInput([Link])}
placeholder="Enter task..." />
<button onClick={addTodo}>Add</button>
<ul>
{[Link](todo => (
<li key={[Link]}
style={{ textDecoration: [Link] ? 'line-through' : 'none' }}>
<span onClick={() => toggle([Link])}>{[Link]}</span>
<button onClick={() => remove([Link])}>X</button>
 </li>
))}
</ul>
</div>
);
}
export default TodoApp;

2.6 useEffect Hook

// [Link]
import React, { useState, useEffect } from 'react';

interface Post {
id: number;
title: string;
body: string;
}

function DataFetcher() {
const [posts, setPosts] = useState<Post[]>([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
fetch('[Link]
.then(res => [Link]())
.then(data => {
setPosts(data);
setLoading(false);
});
}, []); // empty array = run once on mount

if (loading) return <p>Loading...</p>;

return (
<ul>
{[Link](post => (
<li key={[Link]}>
<h3>{[Link]}</h3>
<p>{[Link]}</p>
</li>
))}
</ul>
);
}
export default DataFetcher;
MODULE 3: [Link] — Routes

3.1 What is [Link]?

[Link] is a React framework that adds file-based routing, server-side rendering (SSR), and API routes out of the
box.

3.2 File-based Routing

// Folder structure (App Router - [Link] 13+)
app/
[Link] -> /
about/
[Link] -> /about
blog/
[Link] -> /blog
[slug]/
[Link] -> /blog/:slug (dynamic route)
dashboard/
[Link] -> shared layout for /dashboard/*
[Link] -> /dashboard

3.3 Basic Pages

// app/[Link] (Home Page)
export default function HomePage() {
return (
<main>
<h1>Welcome to My Website</h1>
<p>This is the home page.</p>
</main>
);
}

// app/about/[Link]
export default function AboutPage() {
return (
<div>
<h1>About Us</h1>
<p>We are a web development team.</p>
</div>
);
}

3.4 Dynamic Routes

// app/products/[id]/[Link]
interface Props {
params: { id: string };
}

async function getProduct(id: string) {

const res = await fetch(`[Link]
return [Link]();
}

export default async function ProductPage({ params }: Props) {

 const product = await getProduct([Link]);

return (
<div>
<h1>{[Link]}</h1>
<p>{[Link]}</p>
<strong>Price: ${[Link]}</strong>
<img src={[Link]} alt={[Link]} width={200} />
</div>
);
}

3.5 Navigation with Link

// app/components/[Link]
import Link from 'next/link';

export default function Navbar() {

return (
<nav style={{ display: 'flex', gap: '1rem', padding: '1rem',
background: '#111', color: '#fff' }}>
<Link href="/">Home</Link>
<Link href="/about">About</Link>
<Link href="/blog">Blog</Link>
<Link href="/products">Products</Link>
</nav>
);
}

3.6 API Routes

// app/api/students/[Link]
import { NextResponse } from 'next/server';

const students = [
{ id: 1, name: "Ali", marks: 88 },
{ id: 2, name: "Sara", marks: 92 },
];

// GET /api/students
export async function GET() {
return [Link](students);
}

// POST /api/students
export async function POST(request: Request) {
const body = await [Link]();
const newStudent = { id: [Link] + 1, ...body };
[Link](newStudent);
return [Link](newStudent, { status: 201 });
}
MODULE 4: MongoDB

4.1 What is MongoDB?

MongoDB is a NoSQL document database that stores data as JSON-like documents. It is flexible, scalable, and
works great with [Link]/[Link].

4.2 Setting Up (Mongoose with [Link])

// Install
// npm install mongoose

// lib/[Link]
import mongoose from 'mongoose';

const MONGO_URI = [Link].MONGO_URI as string;

let isConnected = false;

export async function connectDB() {

if (isConnected) return;
await [Link](MONGO_URI);
isConnected = true;
[Link]('MongoDB Connected');
}

4.3 Defining a Model

// models/[Link]
import mongoose, { Schema, Document } from 'mongoose';

export interface IStudent extends Document {

name: string;
email: string;
marks: number;
createdAt: Date;
}

const StudentSchema = new Schema<IStudent>({

name: { type: String, required: true },
email: { type: String, required: true, unique: true },
marks: { type: Number, default: 0 },
createdAt: { type: Date, default: [Link] },
});

export default [Link] ||

[Link]<IStudent>('Student', StudentSchema);

4.4 CRUD Operations via API Routes

// app/api/students/[Link]
import { NextResponse } from 'next/server';
import { connectDB } from '@/lib/mongodb';
import Student from '@/models/Student';

// GET — Fetch all students

export async function GET() {
await connectDB();
const students = await [Link]({});
return [Link](students);
}

// POST — Create student

export async function POST(req: Request) {
await connectDB();
const body = await [Link]();
const student = await [Link](body);
return [Link](student, { status: 201 });
}

// app/api/students/[id]/[Link]
// PUT — Update student
export async function PUT(req: Request,
{ params }: { params: { id: string } }) {
await connectDB();
const body = await [Link]();
const updated = await [Link]([Link], body,
{ new: true });
return [Link](updated);
}

// DELETE — Delete student

export async function DELETE(_req: Request,
{ params }: { params: { id: string } }) {
await connectDB();
await [Link]([Link]);
return [Link]({ message: 'Deleted successfully' });
}
MODULE 5: Tailwind CSS

5.1 What is Tailwind CSS?

Tailwind is a utility-first CSS framework. Instead of writing custom CSS, you apply pre-built utility classes directly
in your HTML/JSX.

5.2 Setup in [Link]

# Install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// [Link]
export default {
content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
theme: { extend: {} },
plugins: [],
};

// app/[Link]
@tailwind base;
@tailwind components;
@tailwind utilities;

5.3 Common Utility Classes

// Layout
<div className="flex items-center justify-between gap-4 p-6">

// Typography
<h1 className="text-3xl font-bold text-gray-900">Title</h1>
<p className="text-base text-gray-600 leading-relaxed">Body text</p>

// Colors & backgrounds

<div className="bg-blue-500 text-white rounded-lg shadow-md p-4">

// Spacing
<div className="mt-4 mb-6 px-8 py-3">

// Responsive (mobile-first)
<div className="w-full md:w-1/2 lg:w-1/3">

5.4 Styled Card Component

// components/[Link]
interface ProductCardProps {
title: string;
price: number;
image: string;
category: string;
}

export default function ProductCard({ title, price,

image, category }: ProductCardProps) {
return (
 <div className="bg-white rounded-2xl shadow-lg overflow-hidden
hover:shadow-xl transition-shadow duration-300 max-w-sm">
<img src={image} alt={title}
className="w-full h-48 object-cover" />
<div className="p-5">
<span className="text-xs font-semibold uppercase
tracking-wide text-blue-600">
{category}
</span>
<h3 className="mt-1 text-lg font-bold text-gray-800
line-clamp-2">
{title}
</h3>
<div className="mt-4 flex items-center justify-between">
<span className="text-2xl font-bold text-gray-900">
${price}
</span>
<button className="bg-blue-600 text-white px-4 py-2
rounded-lg hover:bg-blue-700
transition-colors">
Add to Cart
</button>
</div>
</div>
</div>
);
}

5.5 Responsive Navbar

// components/[Link]
import Link from 'next/link';

export default function Navbar() {

return (
<nav className="bg-gray-900 text-white px-6 py-4
flex flex-col md:flex-row
md:items-center md:justify-between">
<div className="text-xl font-bold text-blue-400">MyApp</div>
<ul className="flex gap-6 mt-3 md:mt-0 text-sm font-medium">
<li><Link href="/"
className="hover:text-blue-400 transition-colors">
Home</Link></li>
<li><Link href="/about"
className="hover:text-blue-400 transition-colors">
About</Link></li>
<li><Link href="/products"
className="hover:text-blue-400 transition-colors">
Products</Link></li>
</ul>
</nav>
);
}
MODULE 6: Full Project — Student Management App
This project combines all modules: [Link] routing, React state, MongoDB for storage, TypeScript types, and
Tailwind CSS styling.

6.1 Project Structure

student-app/
app/
[Link] <- Student list page
add/
[Link] <- Add student form
api/
students/
[Link] <- GET, POST
[id]/
[Link] <- PUT, DELETE
models/
[Link] <- Mongoose model
lib/
[Link] <- DB connection
components/
[Link] <- Reusable card
[Link] <- Add/edit form
types/
[Link] <- Shared TypeScript types

6.2 Shared Types

// types/[Link]
export interface Student {
_id?: string;
name: string;
email: string;
marks: number;
grade?: string;
}

export function calcGrade(marks: number): string {

if (marks >= 90) return "A+";
if (marks >= 75) return "A";
if (marks >= 60) return "B";
if (marks >= 50) return "C";
return "Fail";
}

6.3 Student List Page

// app/[Link]
import Link from 'next/link';
import { connectDB } from '@/lib/mongodb';
import StudentModel from '@/models/Student';
import { calcGrade, Student } from '@/types';

export default async function HomePage() {

await connectDB();
 const students: Student[] = await [Link]({}).lean();

return (
<main className="min-h-screen bg-gray-50 p-8">
<div className="max-w-4xl mx-auto">
<div className="flex justify-between items-center mb-6">
<h1 className="text-3xl font-bold text-gray-800">
Students
</h1>
<Link href="/add"
className="bg-blue-600 text-white px-5 py-2
rounded-lg hover:bg-blue-700">
+ Add Student
</Link>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{[Link](s => (
<div key={s._id}
className="bg-white rounded-xl shadow p-5">
<h2 className="text-xl font-bold">{[Link]}</h2>
<p className="text-gray-500">{[Link]}</p>
<div className="mt-2 flex justify-between">
<span>Marks: <b>{[Link]}</b></span>
<span className="font-bold text-blue-600">
{calcGrade([Link])}
</span>
</div>
</div>
))}
</div>
</div>
</main>
);
}

6.4 Add Student Form (Client Component)

// app/add/[Link]
'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';

export default function AddStudentPage() {

const router = useRouter();
const [form, setForm] = useState({ name:'', email:'', marks:'' });
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');

const handleSubmit = async () => {

setLoading(true);
const res = await fetch('/api/students', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: [Link]({ ...form, marks: Number([Link]) }),
});
 if ([Link]) {
[Link]('/');
} else {
setError('Failed to add student');
setLoading(false);
}
};

return (
<main className="min-h-screen bg-gray-50 flex items-center justify-center">
<div className="bg-white rounded-2xl shadow-lg p-8 w-full max-w-md">
<h1 className="text-2xl font-bold mb-6 text-gray-800">
Add Student
</h1>
{error && <p className="text-red-500 mb-4">{error}</p>}
<div className="space-y-4">
<input
placeholder="Full Name"
value={[Link]}
onChange={e => setForm({...form, name: [Link]})}
className="w-full border rounded-lg px-4 py-2 focus:outline-none
focus:ring-2 focus:ring-blue-400"
/>
<input
placeholder="Email"
value={[Link]}
onChange={e => setForm({...form, email: [Link]})}
className="w-full border rounded-lg px-4 py-2"
/>
<input
placeholder="Marks (0-100)"
type="number"
value={[Link]}
onChange={e => setForm({...form, marks: [Link]})}
className="w-full border rounded-lg px-4 py-2"
/>
<button
onClick={handleSubmit}
disabled={loading}
className="w-full bg-blue-600 text-white py-2 rounded-lg
hover:bg-blue-700 disabled:opacity-50">
{loading ? 'Saving...' : 'Add Student'}
</button>
</div>
</div>
</main>
);
}
Quick Reference Cheat Sheet
TypeScript — Declare array
const items: string[] = [];

TypeScript — Interface
interface User { name: string; age: number; }

TypeScript — Loop array

for (const item of items) { ... }

TypeScript — Arrow function

const fn = (x: number): number => x * 2;

React — useState
const [val, setVal] = useState<string>('');

React — useEffect on mount

useEffect(() => { fetchData(); }, []);

React — Conditional render

{isLoggedIn && <Dashboard />}

React — List render

{[Link](i => <li key={[Link]}>{[Link]}</li>)}

[Link] — Dynamic route file

app/blog/[slug]/[Link]

[Link] — Get params

({ params }: { params: { slug: string } })

[Link] — API GET handler

export async function GET() { return [Link](data); }

MongoDB — Connect
await [Link]([Link].MONGO_URI);

MongoDB — Find all

await [Link]({});

MongoDB — Create
await [Link]({ name, email });

MongoDB — Update
await [Link](id, body, { new: true });

MongoDB — Delete
await [Link](id);

Tailwind — Flex center

className="flex items-center justify-center"

Tailwind — Responsive grid

className="grid grid-cols-1 md:grid-cols-3 gap-4"

Tailwind — Button style

className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700"

Good luck with your project, assignments, and final exam!