From 21a63dd0c5a6ead4c0b3675cfc8c185f9c8fbf67 Mon Sep 17 00:00:00 2001 From: Antigravity Date: Fri, 15 May 2026 15:00:39 +0530 Subject: [PATCH 1/4] Add structured Computer Networks documentation for Semester 4 --- app/components/subjects.tsx | 2 +- app/sem4/cn/[chapter]/page.tsx | 105 +++++++++++++++++++++++++++ app/sem4/cn/content/chapter0.tsx | 85 ++++++++++++++++++++++ app/sem4/cn/content/chapter1.tsx | 115 +++++++++++++++++++++++++++++ app/sem4/cn/content/chapter2.tsx | 120 +++++++++++++++++++++++++++++++ 5 files changed, 426 insertions(+), 1 deletion(-) create mode 100644 app/sem4/cn/[chapter]/page.tsx create mode 100644 app/sem4/cn/content/chapter0.tsx create mode 100644 app/sem4/cn/content/chapter1.tsx create mode 100644 app/sem4/cn/content/chapter2.tsx diff --git a/app/components/subjects.tsx b/app/components/subjects.tsx index 308c852..1ca317b 100644 --- a/app/components/subjects.tsx +++ b/app/components/subjects.tsx @@ -123,7 +123,7 @@ const subjectCodes: Record = { }; // Available subjects -const available = ["ep", "c", "em1", "em2", "oops"]; // only Engineering Physics and C Language are live now +const available = ["ep", "c", "em1", "em2", "oops", "cn"]; // only Engineering Physics and C Language are live now export default function SubjectsSection() { return ( diff --git a/app/sem4/cn/[chapter]/page.tsx b/app/sem4/cn/[chapter]/page.tsx new file mode 100644 index 0000000..0146377 --- /dev/null +++ b/app/sem4/cn/[chapter]/page.tsx @@ -0,0 +1,105 @@ +import Link from "next/link"; +import { Ch0Content } from "../content/chapter0"; +import { Ch1Content } from "../content/chapter1"; +import { Ch2Content } from "../content/chapter2"; +import { ArrowBigLeft, ArrowBigRight } from "lucide-react"; +import { Righteous } from "next/font/google"; + +const righteous = Righteous({ + subsets: ['latin'], + weight: '400', + variable: '--font-righteous', + }); + +// Chapter data for Computer Networks +const chapters = [ + { id: "ch0", title: "Course Outline", component: Ch0Content }, + { id: "ch1", title: "Introduction to Computer Networks & OSI Model", component: Ch1Content }, + { id: "ch2", title: "Networking Components & Devices", component: Ch2Content }, +]; + +type ChapterProps = { + params: { chapter: string }; +}; + +export default function ChapterPage({ params }: ChapterProps) { + const currentIndex = chapters.findIndex((c) => c.id === params.chapter); + const chapter = chapters[currentIndex]; + + if (!chapter) { + return

Chapter not found

; + } + + const ChapterComponent = chapter.component; + const prevChapter = currentIndex > 0 ? chapters[currentIndex - 1] : null; + const nextChapter = currentIndex < chapters.length - 1 ? chapters[currentIndex + 1] : null; + + return ( +
+ {/* Content */} +
+

+ Computer Networks +

+

{chapter.title}

+ + {/* Navigation Buttons */} +
+ {prevChapter ? ( + + Previous + + ) : ( +
+ )} + + {nextChapter ? ( + + Next + + ) : ( +
+ )} +
+ +
+ +
+ + {/* Navigation Buttons (Bottom) */} +
+ {prevChapter ? ( + + {prevChapter.title} + + ) : ( +
+ )} + + {nextChapter ? ( + + {nextChapter.title} + + ) : ( +
+ )} +
+
+ ); +} diff --git a/app/sem4/cn/content/chapter0.tsx b/app/sem4/cn/content/chapter0.tsx new file mode 100644 index 0000000..f044437 --- /dev/null +++ b/app/sem4/cn/content/chapter0.tsx @@ -0,0 +1,85 @@ +export const Ch0Content = () => { + return ( +
+ +

+ Welcome to Computer Networks — a fundamental course + that explores how computers communicate and share resources. This course covers the + principles, protocols, and technologies that power the internet and modern telecommunications. +

+ +
+ + {/* Module I */} +
+

+ Module I: Foundations & Reference Models +

+
    +
  • Introduction to computer networks and their importance
    • +
  • Network topologies: Star, Mesh, Bus, Ring, and Hybrid
    • +
  • Classification of networks: LAN, MAN, WAN, PAN
    • +
  • Detailed study of the OSI Reference Model (7 Layers)
    • +
  • Introduction to the TCP/IP Protocol Suite
    • +
  • Comparison between OSI and TCP/IP models
    • +
+
+ +
+ + {/* Module II */} +
+

+ Module II: Physical & Data Link Layers +

+
    +
  • Transmission Media: Guided (Twisted pair, Coaxial, Fiber) and Unguided (Radio, Micro, Infrared)
    • +
  • Data Link Layer design issues: Framing, Error control, and Flow control
    • +
  • Error detection and correction: Parity, Checksum, CRC, and Hamming code
    • +
  • Media Access Control (MAC) protocols: ALOHA, CSMA/CD, CSMA/CA
    • +
  • Ethernet standards and Wireless LANs (802.11)
    • +
+
+ +
+ + {/* Module III */} +
+

+ Module III: Network Layer +

+
    +
  • IP Addressing: IPv4 (Classful & Classless) and Introduction to IPv6
    • +
  • Subnetting and Supernetting basics
    • +
  • Routing Algorithms: Distance Vector (RIP) and Link State (OSPF)
    • +
  • Congestion control algorithms: Leaky Bucket and Token Bucket
    • +
  • Internetworking devices: Hubs, Switches, Routers, and Gateways
    • +
+
+ +
+ + {/* Module IV */} +
+

+ Module IV: Transport & Application Layers +

+
    +
  • Transport layer services: Connection-oriented vs Connectionless
    • +
  • UDP: Header format and characteristics
    • +
  • TCP: Segment structure, Connection management, and Flow control
    • +
  • Application Layer protocols: DNS, HTTP, HTTPS, FTP, SMTP, and DHCP
    • +
  • Network Security basics: Cryptography, Firewalls, and VPNs
    • +
+
+ +
+ +

+ By the end of this course, you will understand how data travels from one point to another + across the globe, the intricacies of the protocols involved, and the hardware that makes + it all possible. +

+
+ ); +}; diff --git a/app/sem4/cn/content/chapter1.tsx b/app/sem4/cn/content/chapter1.tsx new file mode 100644 index 0000000..575ec75 --- /dev/null +++ b/app/sem4/cn/content/chapter1.tsx @@ -0,0 +1,115 @@ +export const Ch1Content = () => { + return ( +
+ +

+ To understand how networks function, we use Reference Models. These models + break down the complex process of communication into smaller, manageable layers. The two most + prominent models are the OSI Model and the TCP/IP Model. +

+ +
+ + {/* OSI Model */} +
+

The OSI Reference Model

+

+ Developed by the ISO, the Open Systems Interconnection (OSI) model consists of 7 layers. + Each layer provides a specific service to the layer above it. +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
LayerNamePrimary Responsibility
7ApplicationUser interface and network services (HTTP, FTP).
6PresentationData translation, encryption, and compression.
5SessionManaging sessions and dialogues between hosts.
4TransportEnd-to-end delivery and error recovery (TCP, UDP).
3NetworkRouting and logical addressing (IP).
2Data LinkFraming, error detection, and MAC addressing.
1PhysicalTransmission of raw bits over physical media.
+
+ +
+ Mnemonic: "Please Do Not Throw Sausage Pizza Away" (Physical, Data Link, Network, Transport, Session, Presentation, Application). +
+
+ +
+ + {/* TCP/IP Model */} +
+

The TCP/IP Model

+

+ The TCP/IP model is the practical implementation used in the real world (the Internet). + It has 4 main layers: +

+
    +
  • Application Layer: Combines OSI's top three layers (Session, Presentation, Application).
    • +
  • Transport Layer: Responsible for host-to-host communication.
    • +
  • Internet Layer: Handles packet routing across networks (similar to OSI Network layer).
    • +
  • Network Access Layer: Covers the physical and data link layers of the OSI model.
    • +
+ +
+
Comparison Note
+
+ While OSI is a theoretical model used for teaching, TCP/IP is the actual standard protocols + that make the internet work today. +
+
+
+ +
+ + {/* Interview Questions */} +
+

Key Interview Questions

+
    +
  • What is the difference between TCP and UDP?
    • +
  • At which layer does a Router operate? (Answer: Network Layer)
    • +
  • What is the purpose of the 3-way handshake in TCP?
    • +
  • Which layer is responsible for encryption? (Answer: Presentation Layer)
    • +
+
+ +
+ ); +}; diff --git a/app/sem4/cn/content/chapter2.tsx b/app/sem4/cn/content/chapter2.tsx new file mode 100644 index 0000000..cca034f --- /dev/null +++ b/app/sem4/cn/content/chapter2.tsx @@ -0,0 +1,120 @@ +export const Ch2Content = () => { + return ( +
+ +

+ To build a network, we need specific hardware components that help in connecting devices + and routing data. These are known as Network Interconnection Devices. +

+ +
+ + {/* Hub */} +
+

1. Hub

+
    +
  • Layer: Physical Layer (Layer 1).
    • +
  • Function: A non-intelligent device that broadcasts data to all ports.
    • +
  • Drawback: Leads to high network traffic and security risks as every device receives every packet.
    • +
+
+ +
+ + {/* Switch */} +
+

2. Switch

+
    +
  • Layer: Data Link Layer (Layer 2).
    • +
  • Function: An intelligent device that uses MAC addresses to send data only to the intended recipient.
    • +
  • Benefit: Reduces collisions and improves efficiency compared to a hub.
    • +
+ +
+ Pro Tip: Switches maintain a "MAC Address Table" to remember which device is connected to which port. +
+
+ +
+ + {/* Router */} +
+

3. Router

+
    +
  • Layer: Network Layer (Layer 3).
    • +
  • Function: Connects different networks (e.g., your home network to the Internet).
    • +
  • Logic: Uses IP addresses and routing tables to determine the best path for data packets.
    • +
+
+ +
+ + {/* Other Devices */} +
+

Other Important Devices

+
+
+

Bridge

+

+ Connects two similar network segments (e.g., two LANs) to form a larger network. +

+
+
+

Gateway

+

+ A "translator" that connects networks with different protocols (e.g., connecting a TCP/IP network to an IPX/SPX network). +

+
+
+

Repeater

+

+ Regenerates signals to allow them to travel longer distances without degradation. +

+
+
+

Modem

+

+ MOdulates/DEModulates signals between digital and analog forms for transmission over telephone lines. +

+
+
+
+ +
+ + {/* Comparison Table */} +
+

Comparison Summary

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
DeviceOSI LayerAddressing Used
HubPhysical (1)None (Broadcast)
SwitchData Link (2)MAC Address
RouterNetwork (3)IP Address
+
+
+ +
+ ); +}; From c5f41182f9cb04e1dbdbe4d70b22ffc1065f1893 Mon Sep 17 00:00:00 2001 From: Antigravity Date: Sat, 16 May 2026 00:36:45 +0530 Subject: [PATCH 2/4] Address reviewer feedback: Add Sidebar, Layout, Diagrams, and remove interview questions --- app/sem4/cn/[chapter]/page.tsx | 2 +- app/sem4/cn/components/sidebar.tsx | 68 +++++++++++++++++++++++++++++ app/sem4/cn/content/chapter1.tsx | 31 ++++++++----- app/sem4/cn/content/chapter2.tsx | 17 ++++++++ app/sem4/cn/layout.tsx | 30 +++++++++++++ app/sem4/cn/page.tsx | 33 ++++++++++++++ public/cn-hub.png | Bin 0 -> 408371 bytes public/cn-osi.png | Bin 0 -> 447715 bytes public/cn-switch.png | Bin 0 -> 389191 bytes public/cn-tcp-ip.png | Bin 0 -> 452000 bytes 10 files changed, 169 insertions(+), 12 deletions(-) create mode 100644 app/sem4/cn/components/sidebar.tsx create mode 100644 app/sem4/cn/layout.tsx create mode 100644 app/sem4/cn/page.tsx create mode 100644 public/cn-hub.png create mode 100644 public/cn-osi.png create mode 100644 public/cn-switch.png create mode 100644 public/cn-tcp-ip.png diff --git a/app/sem4/cn/[chapter]/page.tsx b/app/sem4/cn/[chapter]/page.tsx index 0146377..6362552 100644 --- a/app/sem4/cn/[chapter]/page.tsx +++ b/app/sem4/cn/[chapter]/page.tsx @@ -35,7 +35,7 @@ export default function ChapterPage({ params }: ChapterProps) { const nextChapter = currentIndex < chapters.length - 1 ? chapters[currentIndex + 1] : null; return ( -
+
{/* Content */}

diff --git a/app/sem4/cn/components/sidebar.tsx b/app/sem4/cn/components/sidebar.tsx new file mode 100644 index 0000000..5bfaa6b --- /dev/null +++ b/app/sem4/cn/components/sidebar.tsx @@ -0,0 +1,68 @@ +"use client"; +import { Righteous } from "next/font/google"; +import Link from "next/link"; +import { usePathname } from "next/navigation"; +import { useState } from "react"; + +const righteous = Righteous({ + subsets: ["latin"], + weight: "400", + variable: "--font-righteous", +}); + +export default function Sidebar() { + const pathname = usePathname(); + const [open, setOpen] = useState(true); + + const chapters = [ + { id: "ch0", title: "Course Outline" }, + { id: "ch1", title: "Introduction to Computer Networks & OSI Model" }, + { id: "ch2", title: "Networking Components & Devices" }, + ]; + + return ( +
+ {/* Sidebar */} + + + {/* Toggle Button (always visible) */} + +
+ ); +} diff --git a/app/sem4/cn/content/chapter1.tsx b/app/sem4/cn/content/chapter1.tsx index 575ec75..8ab98f6 100644 --- a/app/sem4/cn/content/chapter1.tsx +++ b/app/sem4/cn/content/chapter1.tsx @@ -1,3 +1,5 @@ +import Image from "next/image"; + export const Ch1Content = () => { return (
@@ -17,6 +19,14 @@ export const Ch1Content = () => { Developed by the ISO, the Open Systems Interconnection (OSI) model consists of 7 layers. Each layer provides a specific service to the layer above it.

+ + OSI Model Layers
@@ -81,6 +91,15 @@ export const Ch1Content = () => { The TCP/IP model is the practical implementation used in the real world (the Internet). It has 4 main layers:

+ + +