ABTalks — Developer Momentum Platform

A premium, mobile-first platform for a 60-day coding challenge designed to turn daily building into verifiable proof of work, quantifiable skill growth, Build Intelligence, and a public developer portfolio.

Built for ABTalks Problem Statement 1: Redesign ABTalks.

---

📱 Product Scope & Required Routes

All routes are designed mobile-first and optimized specifically for a 390px mobile viewport width, with a centered mobile shell preview container for desktop evaluation.

• / — Landing Page: Clear product positioning ("TURN 60 DAYS INTO PROOF OF WORK"), product benefit banner ("ABTalks adapts your next step to your progress"), visual 60-day transformation timeline (DAY 01 → DAY 12 → DAY 30 → DAY 60), 4-step journey (Pick a track → Build → Commit → Share), sample demo proof cards, and navigation CTAs.
• /dashboard — Student Dashboard: Centered around "What should I do today, and how am I progressing?" featuring Build Intelligence & Next Best Action, dominant Today's Mission (Day 12) card, Developer Momentum stats (🔥 12 Days), Skill Growth System (5 engineering domains with proficiency %), Portfolio Momentum Showcase, Deterministic Smart Insights, Recent Shipped Builds History, Developer Milestones Tracker, 60-day interactive matrix grid (ChallengeTimeline), and Recovery Mode.
• /day/12 — Challenge Day Workspace: Build Intelligence & Readiness Inspector (0-100% score), 4-stage workflow stepper (BUILD → PROVE → SHARE → DONE), 5-Stage Build Plan Stepper (01. Understand → 02. Plan → 03. Build → 04. Verify → 05. Publish), Definition of Done acceptance criteria checklist, GitHub & LinkedIn proof link submission modals with link format verification, Submission Readiness Gatekeeper, celebration overlay modal (🎉 Day 12 complete!), and live cohort peer submissions feed.

---

✨ Key Features & Product Differentiation

• Build Intelligence & Next Best Action Engine (src/domain/buildIntelligence.ts): Deterministic guidance layer calculating Build Readiness Score (0-100%) and selecting the Next Best Action based on real student task state (Build Plan progress, GitHub proof status, LinkedIn proof status, Recovery state). Includes an expandable "Why this recommendation?" drawer.
• Mobile-First 390px Target Viewport: Pixel-perfect design tuned for mobile screens with touch-friendly controls ($\ge 44\text{px}$).
• Judge Evaluation Preset Switcher: Floating drawer allowing judges to instantly test 7 complete user state scenarios:
  1. Active Day 12 Streaker: 12-day active streak, 20% completion, Day 12 active task.
  2. First Day / Day 1: "Your streak starts today. Everyone starts at Day 1."
  3. Missed Day Recovery Mode: "You missed yesterday. That's okay. Your journey continues today."
  4. Streak at Risk: 4 hours remaining warning pill.
  5. Halfway Hero (Day 30): 30-day milestone, 50% challenge completion.
  6. Challenge Completed (Day 60): 60/60 days completed, full verified public portfolio showcase.
  7. Empty Profile: Unconfigured profile setup state.
• Developer Skill Growth System: Visual progress bars across 5 core engineering domains (Git & GitHub, Frontend Systems, Problem Solving, API & State, Product Architecture) showing skill levels, percentage progress, recent gains (+12%), and contributing build counts.
• 5-Stage Build Execution Plan & Definition of Done: Interactive execution stepper (Understand → Plan → Build → Verify → Publish) and acceptance criteria checkmarks on /day/12.
• Submission Readiness Gatekeeper: Verification checklist verifying task review, build plan completion, GitHub link format, and LinkedIn link format before enabling day completion.
• Portfolio Momentum Showcase: Aggregates verified GitHub repos, LinkedIn posts, and public artifacts into developer career capital.
• Deterministic Smart Insights: Real-time client-side analytics calculating building velocity, dominant skill focus, and milestone proximity with zero API latency or rate limit risks.
• Micro-Interactions & Reduced Motion: Smooth progress bar width animations, fast card entrance transitions (.animate-card-entrance), streak celebration glow (.animate-streak-celebrate), touch active feedback, and @media (prefers-reduced-motion: reduce) rules.
• Pure Local Architecture: No external backend, database, authentication, or LLM API key dependencies.

---

🛠 Tech Stack

• Framework: Next.js 16 (App Router)
• UI Library: React 19
• Styling: Tailwind CSS v4 (@theme design tokens in globals.css)
• Typography: Inter (via next/font/google)
• Icons: Lucide React + Custom Inline SVGs
• Language: TypeScript

---

🤖 AI-Assisted Development Log

All prompt sequences and actual AI-assisted development steps used to architect, design, build, and refine this project are logged in PROMPTS.md.

---

🚀 Local Setup Instructions

Prerequisites

• Node.js 18.x or higher
• npm 9.x or higher

Installation & Run

1. Clone or navigate to the repository directory:

   cd abtalks-redesign

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

   Open http://localhost:3000 in your browser (switch to 390px mobile responsive view in browser dev tools for optimal judge evaluation).

4. Build for production:

   npx cross-env NODE_OPTIONS=--max-old-space-size=4096 next build

5. Start the production server:

   npm run start