Skip to content

thegauravmahto/github_for_productmanager

Repository files navigation

GitHub for Product Managers

An interactive, self-paced course to master GitHub — built for AI Product Managers who ship with engineering teams.

Live Demo | Course Content | Getting Started


Next.js TypeScript Tailwind CSS shadcn/ui License


Why This Exists

As an AI PM, GitHub is where your engineering team lives. Understanding Git and GitHub lets you review PRs with confidence, write better specs, prototype faster, and build credibility with engineers.

This course takes you from zero to confident in 8 interactive modules, complete with:

  • Structured lessons with code examples, tables, and diagrams
  • Interactive terminal simulator — type real git commands and see simulated output
  • Quizzes with instant feedback — test your knowledge with explanations
  • Progress tracking — pick up where you left off (saved in localStorage)
  • Pure black theme with green terminal accents

Modules

# Module Time Topics
1 Git Fundamentals 2 hrs Version control, commits, staging, the three states of Git
2 GitHub Basics 2 hrs Git vs GitHub, repos, push/pull, SSH, .gitignore
3 Branching & Collaboration 3 hrs Branches, naming conventions, merge conflicts
4 Pull Requests & Code Review 2 hrs Creating PRs, PM review perspective, good PR descriptions
5 GitHub Issues & Projects 2 hrs Issue tracking, templates, labels, milestones, Kanban boards
6 GitHub Actions & Automation 2 hrs CI/CD workflows, automated testing, secrets management
7 GitHub for AI/ML Projects 2 hrs Repo structure, Git LFS, prompt versioning, open-source navigation
8 Advanced GitHub & PM Workflows 2 hrs Forking, CLI power commands, releases, PM-specific workflows

Screenshots

Landing Page

Course overview with progress tracking and module grid

Module View

Tabbed layout: Learn | Practice (terminal) | Quiz

Interactive Terminal

Type git commands and get simulated output with step-by-step guidance

Quiz

Multiple choice with instant feedback, explanations, and score persistence


Tech Stack

  • Next.js 15 — App Router, React Server Components
  • TypeScript — Type-safe data layer and components
  • Tailwind CSS v4 — Utility-first styling with dark theme
  • shadcn/ui — Accessible, composable component library
  • localStorage — Client-side progress persistence (no backend needed)

Getting Started

Prerequisites

  • Node.js 18+
  • npm, yarn, or pnpm

Install & Run

# Clone the repository
git clone https://github.com/thegauravmahto/github_for_productmanager.git
cd github_for_productmanager

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:3000 in your browser.

Build for Production

npm run build
npm start

Deploy on Vercel

This app is optimized for Vercel. One-click deploy:

Deploy with Vercel

Or deploy via CLI:

npx vercel --prod

Project Structure

src/
├── app/
│   ├── layout.tsx              # Root layout with SEO metadata
│   ├── page.tsx                # Landing page — course overview
│   └── module/[id]/
│       └── page.tsx            # Module detail — Learn | Practice | Quiz
├── components/
│   ├── module-card.tsx         # Course overview card
│   ├── terminal.tsx            # Interactive git terminal simulator
│   ├── quiz.tsx                # Quiz with scoring & persistence
│   ├── progress-bar.tsx        # Overall progress indicator
│   ├── sidebar.tsx             # Module navigation
│   └── lesson-content.tsx      # Markdown renderer for lessons
├── data/
│   └── modules.ts              # All 8 modules: lessons, quizzes, exercises
└── lib/
    ├── progress.ts             # localStorage progress helpers
    └── utils.ts                # Tailwind merge utility

Features

  • 8 comprehensive modules covering Git fundamentals through advanced PM workflows
  • Interactive terminal — practice git commands with simulated output
  • 40+ quiz questions with detailed explanations
  • Progress persistence — quiz scores and module completion saved locally
  • Responsive design — works on desktop, tablet, and mobile
  • SEO optimized — Open Graph, Twitter cards, structured metadata
  • Zero backend — fully static, deploys anywhere
  • Accessible — built with shadcn/ui's accessible primitives

Contributing

Contributions are welcome! Feel free to:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/add-module)
  3. Commit your changes (git commit -m 'Add new module')
  4. Push to the branch (git push origin feature/add-module)
  5. Open a Pull Request

License

This project is licensed under the MIT License. See LICENSE for details.


Built with Next.js, shadcn/ui, and a passion for making GitHub accessible to Product Managers.

Created by Gaurav Mahto — AI Product Manager

About

An interactive, self-paced course to master GitHub — built for AI Product Managers. 8 modules, terminal exercises, quizzes, and progress tracking.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors