From 09ccbc71461dcf84bd77121baee00594f430ba3b Mon Sep 17 00:00:00 2001 From: krishnahacks26 Date: Fri, 15 May 2026 16:32:40 +0530 Subject: [PATCH] feat: Add Agile Methodology documentation --- app/agile/[chapter]/page.tsx | 114 +++++++++++++++++++++++++++++++ app/agile/components/sidebar.tsx | 73 ++++++++++++++++++++ app/agile/content/chapter0.tsx | 52 ++++++++++++++ app/agile/content/chapter1.tsx | 59 ++++++++++++++++ app/agile/content/chapter2.tsx | 49 +++++++++++++ app/agile/content/chapter3.tsx | 52 ++++++++++++++ app/agile/content/chapter4.tsx | 50 ++++++++++++++ app/agile/layout.tsx | 23 +++++++ app/agile/page.tsx | 9 +++ 9 files changed, 481 insertions(+) create mode 100644 app/agile/[chapter]/page.tsx create mode 100644 app/agile/components/sidebar.tsx create mode 100644 app/agile/content/chapter0.tsx create mode 100644 app/agile/content/chapter1.tsx create mode 100644 app/agile/content/chapter2.tsx create mode 100644 app/agile/content/chapter3.tsx create mode 100644 app/agile/content/chapter4.tsx create mode 100644 app/agile/layout.tsx create mode 100644 app/agile/page.tsx diff --git a/app/agile/[chapter]/page.tsx b/app/agile/[chapter]/page.tsx new file mode 100644 index 0000000..e20623f --- /dev/null +++ b/app/agile/[chapter]/page.tsx @@ -0,0 +1,114 @@ +import Link from "next/link"; +import { Righteous } from "next/font/google"; + +import { Ch0Content } from "../content/chapter0"; +import { Ch1Content } from "../content/chapter1"; +import { Ch2Content } from "../content/chapter2"; +import { Ch3Content } from "../content/chapter3"; +import { Ch4Content } from "../content/chapter4"; + +import { ArrowBigLeft, ArrowBigRight } from "lucide-react"; + +const righteous = Righteous({ + subsets: ["latin"], + weight: "400", + variable: "--font-righteous", +}); + +const chapters = [ + { id: "ch0", title: "Course Outline", component: Ch0Content }, + { id: "ch1", title: "Introduction to Agile", component: Ch1Content }, + { id: "ch2", title: "Scrum Framework", component: Ch2Content }, + { id: "ch3", title: "Kanban", component: Ch3Content }, + { id: "ch4", title: "User Stories & Estimation", component: Ch4Content }, +]; + + +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 ( +
+ +
+

+ Agile Methodology +

+ +

+ {chapter.title} +

+ +
+ {prevChapter ? ( + + Previous + + ) : ( +
+ )} + + {nextChapter ? ( + + Next + + ) : ( +
+ )} +
+ +
+ +
+ +
+ {prevChapter ? ( + + {prevChapter.title} + + ) : ( +
+ )} + + {nextChapter ? ( + + {nextChapter.title}{" "} + + + ) : ( +
+ )} +
+
+ ); +} \ No newline at end of file diff --git a/app/agile/components/sidebar.tsx b/app/agile/components/sidebar.tsx new file mode 100644 index 0000000..cc3da18 --- /dev/null +++ b/app/agile/components/sidebar.tsx @@ -0,0 +1,73 @@ +"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 Agile" }, + { id: "ch2", title: "Scrum Framework" }, + { id: "ch3", title: "Kanban" }, + { id: "ch4", title: "User Stories & Estimation" }, + ]; + + return ( +
+ + {/* Sidebar */} + + + {/* Sidebar Toggle Button */} + + +
+ ); +} \ No newline at end of file diff --git a/app/agile/content/chapter0.tsx b/app/agile/content/chapter0.tsx new file mode 100644 index 0000000..957d16f --- /dev/null +++ b/app/agile/content/chapter0.tsx @@ -0,0 +1,52 @@ +export const Ch0Content = () => { + return ( +
+ +

+ Welcome to Agile Methodology. + This course covers modern software development approaches including + Agile principles, Scrum framework, Kanban, and how teams deliver + software iteratively and efficiently. +

+ +
+

Module I: Introduction to Agile

+
    +
  • What is Agile?
    • +
  • Agile Manifesto & 4 Core Values
    • +
  • 12 Agile Principles
    • +
  • Agile vs Waterfall
    • +
+
+ +
+

Module II: Scrum Framework

+
    +
  • What is Scrum?
    • +
  • Scrum Roles — Product Owner, Scrum Master, Dev Team
    • +
  • Sprints & Sprint Planning
    • +
  • Daily Standups, Sprint Review, Retrospective
    • +
+
+ +
+

Module III: Kanban

+
    +
  • What is Kanban?
    • +
  • Kanban Board & Workflow
    • +
  • Kanban vs Scrum
    • +
+
+ +
+

Module IV: User Stories & Estimation

+
    +
  • What are User Stories?
    • +
  • Story Points & Estimation
    • +
  • Product Backlog & Prioritization
    • +
+
+ +
+ ); +}; \ No newline at end of file diff --git a/app/agile/content/chapter1.tsx b/app/agile/content/chapter1.tsx new file mode 100644 index 0000000..8bca343 --- /dev/null +++ b/app/agile/content/chapter1.tsx @@ -0,0 +1,59 @@ +export const Ch1Content = () => { + return ( +
+

+ Agile is a modern software development approach that + focuses on iterative delivery, team collaboration, and responding to change + rather than following a fixed plan. +

+ +
+

What is Agile?

+
    +
  • Iterative and incremental development
    • +
  • Focuses on customer collaboration
    • +
  • Welcomes changing requirements
    • +
  • Delivers working software frequently
    • +
+
+ +
+

Agile Manifesto — 4 Core Values

+
    +
  • Individuals & interactions over processes & tools
    • +
  • Working software over comprehensive documentation
    • +
  • Customer collaboration over contract negotiation
    • +
  • Responding to change over following a plan
    • +
+
+ +
+

12 Agile Principles

+
    +
  • Satisfy customer through early delivery
    • +
  • Welcome changing requirements
    • +
  • Deliver working software frequently
    • +
  • Business & developers must work together daily
    • +
  • Build projects around motivated individuals
    • +
  • Face-to-face communication is most effective
    • +
  • Working software is primary measure of progress
    • +
  • Maintain sustainable development pace
    • +
  • Continuous attention to technical excellence
    • +
  • Simplicity is essential
    • +
  • Self-organizing teams produce best results
    • +
  • Regular reflection and adaptation
    • +
+
+ +
+

Agile vs Waterfall

+
    +
  • Waterfall: Linear & sequential — Agile: Iterative & flexible
    • +
  • Waterfall: Fixed requirements — Agile: Changing requirements welcome
    • +
  • Waterfall: Late delivery — Agile: Frequent small deliveries
    • +
  • Waterfall: Less customer involvement — Agile: Continuous collaboration
    • +
+
+
+ ); +}; \ No newline at end of file diff --git a/app/agile/content/chapter2.tsx b/app/agile/content/chapter2.tsx new file mode 100644 index 0000000..5ab5998 --- /dev/null +++ b/app/agile/content/chapter2.tsx @@ -0,0 +1,49 @@ +export const Ch2Content = () => { + return ( +
+

+ Scrum is the most popular Agile + framework that helps teams deliver work in short cycles called Sprints, + with clear roles, events, and artifacts. +

+ +
+

What is Scrum?

+
    +
  • Lightweight Agile framework
    • +
  • Work divided into Sprints (1-4 weeks)
    • +
  • Daily progress tracking via Standups
    • +
  • Continuous improvement after each Sprint
    • +
+
+ +
+

Scrum Roles

+
    +
  • Product Owner — defines requirements & priorities
    • +
  • Scrum Master — removes blockers, facilitates process
    • +
  • Development Team — builds the product
    • +
+
+ +
+

Scrum Events

+
    +
  • Sprint Planning — what to build this sprint
    • +
  • Daily Standup — 15 min daily sync
    • +
  • Sprint Review — demo to stakeholders
    • +
  • Sprint Retrospective — team improvement discussion
    • +
+
+ +
+

Scrum Artifacts

+
    +
  • Product Backlog — all requirements list
    • +
  • Sprint Backlog — tasks for current sprint
    • +
  • Increment — working software after each sprint
    • +
+
+
+ ); +}; \ No newline at end of file diff --git a/app/agile/content/chapter3.tsx b/app/agile/content/chapter3.tsx new file mode 100644 index 0000000..dad3503 --- /dev/null +++ b/app/agile/content/chapter3.tsx @@ -0,0 +1,52 @@ +export const Ch3Content = () => { + return ( +
+

+ Kanban is a visual Agile framework + that helps teams manage and improve workflow using a Kanban board with + columns representing different stages of work. +

+ +
+

What is Kanban?

+
    +
  • Visual workflow management system
    • +
  • Originated from manufacturing process
    • +
  • Focus on continuous delivery
    • +
  • Limits Work in Progress (WIP)
    • +
+
+ +
+

Kanban Board

+
    +
  • To Do — tasks not yet started
    • +
  • In Progress — tasks being worked on
    • +
  • Done — completed tasks
    • +
  • WIP Limits — max tasks allowed per column
    • +
+
+ +
+

Kanban Principles

+
    +
  • Visualize the workflow
    • +
  • Limit Work in Progress
    • +
  • Manage and improve flow
    • +
  • Make process policies explicit
    • +
  • Continuously improve
    • +
+
+ +
+

Kanban vs Scrum

+
    +
  • Kanban: Continuous flow — Scrum: Fixed sprints
    • +
  • Kanban: No fixed roles — Scrum: Defined roles
    • +
  • Kanban: Pull system — Scrum: Push system
    • +
  • Kanban: Ongoing — Scrum: Time-boxed iterations
    • +
+
+
+ ); +}; \ No newline at end of file diff --git a/app/agile/content/chapter4.tsx b/app/agile/content/chapter4.tsx new file mode 100644 index 0000000..28f36ef --- /dev/null +++ b/app/agile/content/chapter4.tsx @@ -0,0 +1,50 @@ +export const Ch4Content = () => { + return ( +
+

+ User Stories are simple + descriptions of features from the user perspective. Estimation + helps teams plan how much work they can complete in a sprint. +

+ +
+

What are User Stories?

+
    +
  • Short, simple feature descriptions
    • +
  • Written from user perspective
    • +
  • Format: As a [user], I want [goal], so that [reason]
    • +
  • Example: As a student, I want to search topics, so that I can find notes quickly
    • +
+
+ +
+

Story Points & Estimation

+
    +
  • Story Points measure effort, not time
    • +
  • Planning Poker — team estimation technique
    • +
  • Fibonacci scale — 1, 2, 3, 5, 8, 13...
    • +
  • Velocity — average points completed per sprint
    • +
+
+ +
+

Product Backlog

+
    +
  • Ordered list of all features/requirements
    • +
  • Managed by Product Owner
    • +
  • Prioritized by business value
    • +
  • Refined regularly in Backlog Grooming
    • +
+
+ +
+

Acceptance Criteria

+
    +
  • Conditions a story must meet to be Done
    • +
  • Agreed upon by team and Product Owner
    • +
  • Clear, testable, and measurable
    • +
+
+
+ ); +}; \ No newline at end of file diff --git a/app/agile/layout.tsx b/app/agile/layout.tsx new file mode 100644 index 0000000..b8165f8 --- /dev/null +++ b/app/agile/layout.tsx @@ -0,0 +1,23 @@ +import Navbar from "../components/navbar"; +import Sidebar from "./components/sidebar"; + +export const metadata = { + title: "Agile Methodology | openCSE", + description: "Agile Methodology documentation for openCSE", +}; + +export default function AgileLayout({ children }: { children: React.ReactNode }) { + return ( +
+ + +
+ + +
+
{children}
+
+
+
+ ); +} \ No newline at end of file diff --git a/app/agile/page.tsx b/app/agile/page.tsx new file mode 100644 index 0000000..2b771af --- /dev/null +++ b/app/agile/page.tsx @@ -0,0 +1,9 @@ +// app/page.tsx +export default function Home() { + return ( +
+

Welcome to the Tutorial

+

Select a chapter from the sidebar to get started.

+
+ ); +}