Skip to content

feat: Add Agile Methodology documentation #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Krishna-Sah26 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: Add Agile Methodology documentation #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 114 additions & 0 deletions app/agile/[chapter]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 <h1 className="text-2xl font-bold">Chapter not found</h1>;
}

const ChapterComponent = chapter.component;
const prevChapter = currentIndex > 0 ? chapters[currentIndex - 1] : null;
const nextChapter =
currentIndex < chapters.length - 1 ? chapters[currentIndex + 1] : null;

return (
<div className="flex flex-col bg-[#1B0D00] min-h-full p-2 pt-6 text-[#e2d1c1]">

<div className="flex-1">
<h1 className={`text-4xl font-bold ${righteous.className} mb-2`}>
Agile Methodology
</h1>

<p className={`text-2xl mt-[-8px] ${righteous.className}`}>
{chapter.title}
</p>

<div className="flex justify-between mt-3">
{prevChapter ? (
<Link
href={`/agile/${prevChapter.id}`}
className="px-4 py-1 text-2xl flex items-center justify-center bg-[#e2d1c1] text-[#1b0d00] rounded hover:bg-[#ac9e91] transition"
style={{ fontFamily: "Rockwell, Serif, serif" }}
>
<ArrowBigLeft className="inline-block mr-1" /> Previous
</Link>
) : (
<div />
)}

{nextChapter ? (
<Link
href={`/agile/${nextChapter.id}`}
className="px-4 py-1 text-2xl flex items-center justify-center bg-[#e2d1c1] text-[#1b0d00] rounded hover:bg-[#ac9e91] transition"
style={{ fontFamily: "Rockwell, Serif, serif" }}
>
Next <ArrowBigRight className="inline-block ml-1" />
</Link>
) : (
<div />
)}
</div>

<hr className="my-6 border-t-3" />
<ChapterComponent />
</div>

<div className="flex justify-between my-8">
{prevChapter ? (
<Link
href={`/agile/${prevChapter.id}`}
className="px-4 py-2 bg-[#e2d1c1] text-xl flex items-center justify-center text-[#1b0d00] rounded hover:bg-[#ac9e91] transition"
style={{ fontFamily: "Rockwell, Serif, serif" }}
>
<ArrowBigLeft className="inline-block mr-1" /> {prevChapter.title}
</Link>
) : (
<div />
)}

{nextChapter ? (
<Link
href={`/agile/${nextChapter.id}`}
className="px-4 py-2 bg-[#e2d1c1] text-xl flex items-center justify-center text-[#1b0d00] rounded hover:bg-[#ac9e91] transition"
style={{ fontFamily: "Rockwell, Serif, serif" }}
>
{nextChapter.title}{" "}
<ArrowBigRight className="inline-block ml-1" />
</Link>
) : (
<div />
)}
</div>
</div>
);
}
73 changes: 73 additions & 0 deletions app/agile/components/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div className="flex relative">

{/* Sidebar */}
<aside
className={`h-[100vh] sticky top-0 bg-[#fae8d7] text-[#1B0D00] p-0 flex flex-col transition-all duration-300 ${
open ? "w-64" : "w-0 overflow-hidden"
}`}
>
<h2
className="flex items-center text-2xl font-normal pt-3 pl-3 mb-2 bg-[#cebb9c] text-[#1B0D00] pb-2 border-b-4 border-[#1B0D00]"
style={{ fontFamily: "Rockwell, Serif, serif" }}
>
Chapters
</h2>

<ul className="flex-1 overflow-y-auto space-y-0">
{chapters.map((ch) => {
const active = pathname === `/agile/${ch.id}`;
return (
<li key={ch.id}>
<Link
href={`/agile/${ch.id}`}
className={`block px-3 py-2 text-xl transition ${
active ? "bg-[#fccc7e]" : "hover:bg-[#ffdda7af]"
} ${righteous.className}`}
>
{ch.title}
</Link>
</li>
);
})}
</ul>
</aside>

{/* Sidebar Toggle Button */}
<button
onClick={() => setOpen(!open)}
className="toggle-sidebar sticky top-[10%] left-full bg-[#ffdda7d0] h-[85vh] w-[50px] text-[#1B0D00] text-center font-semibold text-2xl border-l-4 rounded-r-2xl border-[#1B0D00] flex items-center justify-center transition-all duration-300"
style={{ fontFamily: "Rockwell, Serif, serif" }}
>
<p className="leading-5">
C<br />H<br />A<br />P<br />T<br />E<br />R<br />S
</p>
</button>

</div>
);
}
52 changes: 52 additions & 0 deletions app/agile/content/chapter0.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
export const Ch0Content = () => {
return (
<div className="course-content">

<p className="p-text">
Welcome to <span className="font-semibold">Agile Methodology</span>.
This course covers modern software development approaches including
Agile principles, Scrum framework, Kanban, and how teams deliver
software iteratively and efficiently.
</p>

<section>
<h3 className="section-heading">Module I: Introduction to Agile</h3>
<ul className="section-list">
<li>What is Agile?</li>
<li>Agile Manifesto & 4 Core Values</li>
<li>12 Agile Principles</li>
<li>Agile vs Waterfall</li>
</ul>
</section>

<section>
<h3 className="section-heading">Module II: Scrum Framework</h3>
<ul className="section-list">
<li>What is Scrum?</li>
<li>Scrum Roles — Product Owner, Scrum Master, Dev Team</li>
<li>Sprints & Sprint Planning</li>
<li>Daily Standups, Sprint Review, Retrospective</li>
</ul>
</section>

<section>
<h3 className="section-heading">Module III: Kanban</h3>
<ul className="section-list">
<li>What is Kanban?</li>
<li>Kanban Board & Workflow</li>
<li>Kanban vs Scrum</li>
</ul>
</section>

<section>
<h3 className="section-heading">Module IV: User Stories & Estimation</h3>
<ul className="section-list">
<li>What are User Stories?</li>
<li>Story Points & Estimation</li>
<li>Product Backlog & Prioritization</li>
</ul>
</section>

</div>
);
};
59 changes: 59 additions & 0 deletions app/agile/content/chapter1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
export const Ch1Content = () => {
return (
<div className="course-content">
<p className="p-text">
Agile is a <span className="font-semibold">modern software development approach</span> that
focuses on iterative delivery, team collaboration, and responding to change
rather than following a fixed plan.
</p>

<section>
<h3 className="section-heading">What is Agile?</h3>
<ul className="section-list">
<li>Iterative and incremental development</li>
<li>Focuses on customer collaboration</li>
<li>Welcomes changing requirements</li>
<li>Delivers working software frequently</li>
</ul>
</section>

<section>
<h3 className="section-heading">Agile Manifesto — 4 Core Values</h3>
<ul className="section-list">
<li>Individuals & interactions over processes & tools</li>
<li>Working software over comprehensive documentation</li>
<li>Customer collaboration over contract negotiation</li>
<li>Responding to change over following a plan</li>
</ul>
</section>

<section>
<h3 className="section-heading">12 Agile Principles</h3>
<ul className="section-list">
<li>Satisfy customer through early delivery</li>
<li>Welcome changing requirements</li>
<li>Deliver working software frequently</li>
<li>Business & developers must work together daily</li>
<li>Build projects around motivated individuals</li>
<li>Face-to-face communication is most effective</li>
<li>Working software is primary measure of progress</li>
<li>Maintain sustainable development pace</li>
<li>Continuous attention to technical excellence</li>
<li>Simplicity is essential</li>
<li>Self-organizing teams produce best results</li>
<li>Regular reflection and adaptation</li>
</ul>
</section>

<section>
<h3 className="section-heading">Agile vs Waterfall</h3>
<ul className="section-list">
<li>Waterfall: Linear & sequential — Agile: Iterative & flexible</li>
<li>Waterfall: Fixed requirements — Agile: Changing requirements welcome</li>
<li>Waterfall: Late delivery — Agile: Frequent small deliveries</li>
<li>Waterfall: Less customer involvement — Agile: Continuous collaboration</li>
</ul>
</section>
</div>
);
};
49 changes: 49 additions & 0 deletions app/agile/content/chapter2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
export const Ch2Content = () => {
return (
<div className="course-content">
<p className="p-text">
<span className="font-semibold">Scrum</span> is the most popular Agile
framework that helps teams deliver work in short cycles called Sprints,
with clear roles, events, and artifacts.
</p>

<section>
<h3 className="section-heading">What is Scrum?</h3>
<ul className="section-list">
<li>Lightweight Agile framework</li>
<li>Work divided into Sprints (1-4 weeks)</li>
<li>Daily progress tracking via Standups</li>
<li>Continuous improvement after each Sprint</li>
</ul>
</section>

<section>
<h3 className="section-heading">Scrum Roles</h3>
<ul className="section-list">
<li>Product Owner — defines requirements & priorities</li>
<li>Scrum Master — removes blockers, facilitates process</li>
<li>Development Team — builds the product</li>
</ul>
</section>

<section>
<h3 className="section-heading">Scrum Events</h3>
<ul className="section-list">
<li>Sprint Planning — what to build this sprint</li>
<li>Daily Standup — 15 min daily sync</li>
<li>Sprint Review — demo to stakeholders</li>
<li>Sprint Retrospective — team improvement discussion</li>
</ul>
</section>

<section>
<h3 className="section-heading">Scrum Artifacts</h3>
<ul className="section-list">
<li>Product Backlog — all requirements list</li>
<li>Sprint Backlog — tasks for current sprint</li>
<li>Increment — working software after each sprint</li>
</ul>
</section>
</div>
);
};
Loading