Skip to content

yatinbhalla/PM-trainer

BranchesTags

Repository files navigation

PM Trainer 🧠

The gym for Product Managers. AI-powered daily practice platform that builds PM mental models through deliberate, structured repetition — powered by Google Gemini.

Build React TypeScript Gemini Tailwind CSS Zustand License Last Commit Live Demo Beta Rating Hallucination Rate

🔗 Try it live on Google AI Studio →

🗺️ Table of Contents

🚀 Overview

Aspiring PMs fail interviews not from lack of intelligence — but from lack of deliberate practice on structured thinking. PM Trainer solves this by shipping a new AI-generated product scenario every day, evaluating the user's reasoning like a Senior PM mentor, and rewarding consistent practice with XP and streaks.

Engineered a full-stack AI evaluation loop — Gemini gemini-3-flash-preview generates schema-validated JSON challenges across 5 PM competency categories and evaluates free-text responses against Senior PM benchmarks — achieving an ~8.5/10 satisfaction rating across beta users by combining dual-persona system prompts, structured responseSchema output, and contextual framework hints. Validated prompt architecture that constrains AI hallucinations to under 5% through strict JSON schema enforcement and a Senior PM system instruction that grounds feedback in observable reasoning, not invented facts. Reduced setup to a single API key and npm run dev, enabling any aspiring PM to start practicing in under 2 minutes — no backend, no auth, no friction.

🎯 Why PM Trainer?

Audience What You Get
Interview Candidates Build portfolio-worthy case study examples; master the 15+ frameworks interviewers expect
Students & Career Switchers A structured, daily practice habit with real feedback — not passive reading
Early-Career PMs Deliberate reps on prioritization, metrics, strategy, and execution thinking
AI PMs & Builders A live example of structured AI output (JSON schema), prompt engineering, and evaluation patterns

PM thinking is a muscle. This is the gym.

⚙️ Key Features

AI-Powered Daily Challenges

  • Generates fresh PM case scenarios on demand via Google Gemini across 5 competency categories: Prioritization, Metrics, Strategy, Execution, and User Research
  • Enforces structured output using Gemini's responseSchema — every challenge ships as validated JSON with title, topic, scenario, task, and hint fields
  • Presents a clean Thinking Workspace (textarea) with a framework hint surfaced contextually

Senior PM Feedback Engine

  • Evaluates free-text user responses using a Senior PM system prompt, grading thinking quality, framework application, and decision rationale
  • Returns structured feedback split into: markdown-formatted assessment, strengths[], improvements[], XP score (10–50), and a reflectionPrompt for deeper learning
  • Awards 50 XP per completed challenge, feeding the gamification loop

Streak + XP Gamification

  • Tracks daily practice streaks with consecutive-day logic (streak resets if a day is skipped)
  • Progresses users through a rank ladder: Novice PM → Product Owner → Senior PM based on total XP
  • Persists all state client-side via Zustand + localStorage — zero backend required

Framework Library (15+ Frameworks)

  • Covers 5 competency domains: Prioritization, Metrics & Analytics, User Research, Strategy, and Execution
  • Walks through RICE, ICE, MoSCoW, North Star, HEART, AARRR, JTBD, Empathy Mapping, Value Proposition Canvas, Porter's Five Forces, Agile, OKRs, and more
  • Surfaces the relevant framework as a hint during each challenge for contextual learning

Case Studies (Coming Soon)

  • Planned: real-company product scenarios with guided PM questions, mirroring the structure of actual PM interview case questions
  • In active development — follow the repo for updates

🛠 Tech Stack

Frontend

React TypeScript Tailwind CSS Vite

AI / ML

Google Gemini @google/genai

State & Data

Zustand date-fns

UI & Animation

Radix UI Motion Lucide React react-markdown

Infra / Tooling

Express Node.js

🗂️ Project Layout

Expand file tree 
PM-trainer/
├── src/
│   ├── components/
│   │   └── ui/               # Radix-based design system components (Button, Card, etc.)
│   ├── lib/
│   │   └── gemini.ts         # Gemini API client — challenge generation & evaluation logic
│   ├── pages/
│   │   ├── Dashboard.tsx     # Home view — streak, XP, rank, and navigation cards
│   │   ├── ChallengeArea.tsx # Daily challenge flow — loading → challenge → evaluating → feedback
│   │   ├── FrameworksList.tsx# Browsable PM framework library (15+ frameworks)
│   │   └── CaseStudiesList.tsx # Real-company case study scenarios
│   ├── store/
│   │   └── useStore.ts       # Zustand store — streak, XP, completedChallenges (persisted)
│   ├── App.tsx               # Root component — view state router & header/footer layout
│   ├── main.tsx              # React entry point
│   └── index.css             # Global styles + Tailwind base
│
├── public/                   # Static assets
├── index.html                # Vite HTML entry point
├── vite.config.ts            # Vite + React plugin config
├── tsconfig.json             # TypeScript compiler options
├── tailwind.config.js        # Tailwind v4 config
├── package.json              # Dependencies & scripts
└── .env.example              # Environment variable template

🧩 Application State — AppContext

PM Trainer manages all user progress client-side using Zustand with the persist middleware, backed by localStorage under the key pm-trainer-storage. No backend or auth required.

graph LR
    A[User completes challenge] --> B[completeDailyChallenge]
    B --> C{Was yesterday\nthe last session?}
    C -- Yes --> D[streak + 1]
    C -- No / gap --> E[streak = 1]
    C -- Same day --> F[No change]
    D & E & F --> G[completedChallenges + 1\nxp + 50\nlastCompletedDate = today]
    G --> H[(localStorage\npm-trainer-storage)]
Loading

Store Shape:

Field Type Purpose
streak number Current consecutive daily streak
lastCompletedDate string | null ISO date of last completed challenge
completedChallenges number Lifetime challenge count
xp number Total XP earned (50 per challenge)

Rank Ladder:

XP Range Rank
0 – 199 Novice PM
200 – 999 Product Owner
1000+ Senior PM

📄 Pages & Routing

Routing is managed via a useState hook in App.tsx — no React Router required.

View Key Component Purpose Key State
dashboard Dashboard.tsx Home — streak, XP, rank cards, nav Reads streak, xp, completedChallenges
daily ChallengeArea.tsx Daily AI challenge flow (4-step) step: loading → challenge → evaluating → feedback
frameworks FrameworksList.tsx Browsable framework reference library Static content
case-studies CaseStudiesList.tsx Real-company case scenarios (Coming Soon) Static placeholder

🧠 NLP & AI Routing

All AI calls are handled in src/lib/gemini.ts using the @google/genai SDK.

Challenge Generation

sequenceDiagram
    participant UI as ChallengeArea
    participant G as gemini.ts
    participant API as Gemini API

    UI->>G: generateDailyChallenge()
    G->>G: Pick random category\n(Prioritization / Metrics / Strategy / Execution / User Research)
    G->>API: generateContent(model: gemini-3-flash-preview)\nwith responseSchema + systemInstruction
    API-->>G: Structured JSON {title, topic, scenario, task, hint}
    G-->>UI: Challenge object
    UI->>UI: setStep('challenge')
Loading

Response Evaluation

sequenceDiagram
    participant UI as ChallengeArea
    participant G as gemini.ts
    participant API as Gemini API
    participant S as Zustand Store

    UI->>G: evaluateChallengeResponse(challenge, userResponse)
    G->>API: generateContent with Senior PM system prompt\n+ challenge context + user answer
    API-->>G: {feedback (markdown), strengths[], improvements[], score (10–50), reflectionPrompt}
    G-->>UI: Feedback object
    UI->>S: completeDailyChallenge() → +50 XP, streak update
    UI->>UI: setStep('feedback')
Loading

Model: gemini-3-flash-preview Output format: Structured JSON via responseMimeType: "application/json" + responseSchema (Gemini Type API) Fallback: JSON.parse(response.text || '{}') — gracefully handles empty/null responses System prompts: Two distinct personas — "expert PM mentor" (challenge gen) and "Senior PM evaluator" (response grading)

📊 PM Frameworks Covered

View all 15+ frameworks

Prioritization

  • RICE (Reach, Impact, Confidence, Effort)
  • ICE (Impact, Confidence, Ease)
  • MoSCoW (Must / Should / Could / Won't)

Metrics & Analytics

  • North Star Framework
  • HEART (Happiness, Engagement, Adoption, Retention, Task Success)
  • AARRR (Acquisition, Activation, Retention, Revenue, Referral)

User Research & Insights

  • Jobs-to-be-Done Theory
  • Personas & User Segmentation
  • Empathy Mapping

Strategy & Planning

  • Value Proposition Canvas
  • Porter's Five Forces
  • Competitive Analysis

Execution & Operations

  • Agile Methodology
  • Sprint Planning
  • Roadmapping & OKRs

🚀 Getting Started

Prerequisites

Install & Run

# 1. Clone the repo
git clone https://github.com/yatinbhalla/PM-trainer.git
cd PM-trainer

# 2. Install dependencies
npm install

# 3. Configure environment variables
cp .env.example .env.local
# Add your key:  GEMINI_API_KEY=your_key_here

# 4. Start the dev server (runs on port 3000)
npm run dev

Available Scripts

Command Description
npm run dev Start development server on localhost:3000
npm run build Production build to /dist
npm run preview Serve the production build locally
npm run lint TypeScript type-check (no-emit)
npm run clean Remove /dist directory
Environment Variables
Variable Required Description
GEMINI_API_KEY ✅ Yes Google Gemini API key from aistudio.google.com

Copy .env.example to .env.local and fill in your key. Never commit .env.local.

⚠️ Known Limitations

  • No user accounts / auth — all progress lives in localStorage; clearing browser data resets XP and streaks
  • Single challenge per day — the streak system enforces one daily completion; no replay mode yet
  • Client-side API key — GEMINI_API_KEY is consumed client-side via Vite env vars; add a proxy server before any public deployment to avoid key exposure
  • No offline mode — challenge generation and evaluation require a live Gemini API connection
  • Case Studies in progress — CaseStudiesList.tsx is a placeholder; real-company scenarios are in development
  • Static framework content — the Framework Library is currently hardcoded; v2 could make it AI-generated or community-contributed
  • No social / leaderboard layer — streaks and XP are local only; a multiplayer accountability layer would drive retention

v2 Ideas

  • User auth + cloud-synced progress (Supabase / Firebase)
  • Adaptive difficulty based on historical XP velocity
  • Export completed case studies to PDF for interview portfolios
  • Slack / email daily challenge reminders
  • Community framework submissions

🤝 Contributing

PM Trainer is built for PMs, by a PM — and the best products are shaped by their users.

If you're an aspiring PM who ran into a confusing framework explanation, a case study that felt off, or a challenge that didn't match your experience level — that's a bug worth filing.

# Fork → branch → PR
git checkout -b feature/your-improvement
git commit -m "Add: your change"
git push origin feature/your-improvement

Open a GitHub Issue for bugs, feature requests, or product feedback. PRs welcome — especially for new frameworks, case study scenarios, or UX improvements to the feedback loop.

Author

Yatin Bhalla · Product Manager & AI Product Builder
LinkedIn Gmail X

About

AI-powered PM practice platform on Google AI Studio. Gemini generates daily product scenarios, evaluates responses like a Senior PM (~8.5/10 beta rating, <5% hallucinations). React 19 · TypeScript · Tailwind v4.

ai.studio/apps/d274e719-0306-47d6-8019-22ca22b871f8?fullscreenApplet=true

Topics

react typescript ai product-management learning-platform tailwindcss gemini-api daily-challenge zustand pm-interview-prep

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages

Generated from google-gemini/aistudio-repository-template