Skip to content

PRODUCT_STRATEGY.md

Latest commit

 

History

History
224 lines (182 loc) · 13.3 KB

PRODUCT_STRATEGY.md

File metadata and controls

224 lines (182 loc) · 13.3 KB
Raw

PRODUCT_STRATEGY.md — ABTalks Developer Momentum Platform

Hackathon Scope: ABTalks Problem Statement 1 — "Redesign ABTalks"
Target Viewport: 390px Mobile Viewport Primary
Mandatory Routes: /, /dashboard, /day/12

1. Current Product Assessment

The application currently has a solid foundation:

  • Framework: Next.js 16 (App Router), React 19, Tailwind CSS v4, Inter typography (next/font/google).
  • Core Routes:
    • / (Landing Page with 60-day challenge introduction, 4-step workflow, matrix preview, mock social proof).
    • /dashboard (Student Dashboard with streak card, Today's Mission Day 12 card, 60-day interactive matrix grid, overall completion progress, achievements, and Recovery Mode).
    • /day/12 (Challenge Day 12 page with 4-stage progression workflow, GitHub & LinkedIn proof link modals with format validation, celebratory completion overlay, and peer submissions feed).
  • Design System & Viewport: Obsidian dark palette (#0b0b0e background, #14141a card surface, #7c3aed primary purple, #6366f1 accent blue, #10b981 success green) wrapped in a .mobile-viewport shell optimized for 390px mobile screens.
  • Judge State Switcher: Floating drawer for real-time edge case testing (Active 12-Day Streaker, First Day, Missed Day Grace, Empty Profile).
  • Build Status: 100% clean production build (npm run build succeeds with zero TypeScript errors, verified on Vercel deployment).

2. Core User Problem

Students participating in a 60-day coding challenge do not fail simply because coding tutorials are unavailable. They fail due to a connected chain of behavioral and execution friction points:

  1. Direction Paralyzation: Students get overwhelmed without a structured daily execution plan.
  2. Tutorial Hell: Learning remains passive; students consume video tutorials without shipping code.
  3. Broken Momentum Demotivation: Missing a single day breaks their streak counter, causing complete abandonment due to punitive UI mechanics.
  4. Unverified Claims: Completed work stays on local laptops without credible, verifiable proof of work.
  5. Private Isolation: Students don't share their builds publicly on LinkedIn or GitHub, missing out on community accountability and recruiter visibility.
  6. Invisible Skill Progression: Activity accumulates (days completed), but students cannot quantify what skills they are strengthening (Git, Frontend, State Architecture, API Design).
  7. Fragmented Work: 60 separate coding tasks fail to aggregate into a unified, professional developer portfolio.

3. Connected Problem Chain & ABTalks Solution

Lack of Daily Execution Plan
       ↓
Passive Building & Tutorial Hell
       ↓
Missing 1 Day -> Broken Streak -> Abandonment
       ↓
Unverified Local Code (No Proof)
       ↓
No Public Visibility on LinkedIn/GitHub
       ↓
Invisible Skill Progression
       ↓
Fragmented Code -> No Coherent Developer Portfolio

How ABTalks Breaks the Problem Chain:

[DISCOVER]  Daily Spec & Skill Target
    ↓
[PLAN]      5-Stage Build Execution Plan (Understand → Plan → Build → Verify → Publish)
    ↓
[BUILD]     Ship code using starter template & Definition of Done checklist
    ↓
[PROVE]     Submit GitHub repository & commit URL with format verification
    ↓
[SHARE]     Post build publicly on LinkedIn for social accountability
    ↓
[RECOVER]   If a day is missed: "Your streak changed. Your journey didn't." (Recovery Mode)
    ↓
[GROW]      Skill Growth System automatically updates domain proficiency (Git, Frontend, APIs)
    ↓
[SHOWCASE]  60 builds aggregate into a verified public Developer Portfolio

4. Proposed Product Thesis

ABTalks — Developer Momentum Platform
"Turn 60 days of daily building into a verified public portfolio and measurable skill momentum."

Instead of treating ABTalks as a static task tracker or prettier dashboard, ABTalks becomes a Developer Momentum Engine. Every daily build task feeds directly into:

  1. Verifiable Proof of Work (GitHub commit + LinkedIn share link validation).
  2. Quantifiable Skill Momentum (Skill level & percentage growth across 5 engineering domains).
  3. Empathetic Streak Recovery (Motivation preservation after missed days).
  4. Public Portfolio Showcase (Automatic aggregation of daily artifacts into career capital).

5. Product Differentiation Analysis

Feature Common / Competitor Baseline ABTalks Developer Momentum Platform User Problem Solved Judge Impact Feasibility
Streak Tracker Simple flame counter (🔥 12 Days) Developer Momentum Header: Combines streak, best streak, completed builds, and portfolio count Streak motivation Baseline High
60-Day Matrix Grid Basic 60-box calendar grid Interactive Timeline: Renders completed, current, missed, locked, and recovered days Visualizing 60-day path Medium High
Day Task View Simple task text card Workspace Build Brief: Includes Objective, Requirements, Deliverables, and Definition of Done Direction clarity High High
Task Execution No execution guidance 5-Stage Build Plan Stepper: (Understand → Plan → Build → Verify → Publish) Execution structure Very High High
Proof Submission Plain text link box Proof Verification Workflow: GitHub repo/commit + LinkedIn post URL input with link format validation Proof of work credibility Very High High
Submission Gate Button always enabled Submission Readiness Gatekeeper: Checklist verifying task review, build completion, and format verification before complete Quality assurance High High
Skill Progress None (only days count) Skill Growth System: Visual breakdown across 5 engineering domains with percentage & recent gain badges Quantifiable skill growth Very High High
Missed Day State Punitive red "Broken Streak" error Empathetic Recovery Mode: "Your streak changed. Your journey didn't." + Catch-Up plan Retention & momentum recovery Very High High
Product Analytics None Deterministic Smart Insights: Real-time analysis of student state (e.g. building consistency, milestone proximity) Proactive guidance without heavy AI High High

6. Core Product Loop

New Student Landing Page (/)
       ↓
Discover Challenge & 60-Day Transformation (Day 1 -> Day 60)
       ↓
Enter Dashboard (/dashboard) -> "What should I do today?"
       ↓
Review Today's Mission & Open Day 12 Workspace (/day/12)
       ↓
Follow 5-Stage Build Plan (Understand → Plan → Build → Verify → Publish)
       ↓
Check Definition of Done Acceptance Criteria
       ↓
Submit GitHub Repository & Commit Proof (Link Format Verified)
       ↓
Submit LinkedIn Post Proof (Link Format Verified)
       ↓
Pass Submission Readiness Gatekeeper -> Click "Mark Day Complete"
       ↓
Trigger Celebration State (+1 Streak Point -> 🔥 13 Days)
       ↓
Skill Growth System Updates Proficiency & Portfolio Artifact Count Increases
       ↓
(If a day is missed: Activate Recovery Mode -> Complete Catch-Up Quest -> Restore Streak)

7. AI & Deterministic Intelligence Opportunity

Adding heavy LLM APIs creates latency, rate limit risks during judging, API key dependencies, and non-deterministic behavior.

Instead, ABTalks implements Deterministic Local Intelligence (Smart Insights Engine):

  • Input: Current student state (completedDaysCount, currentStreak, skillsData, lastSubmissionTime).
  • Engine: Client-side logic calculating:
    • Building Pattern Insight: e.g., "Your strongest building consistency occurs on weekdays."
    • Milestone Proximity: e.g., "You are 2 days away from unlocking the 14-Day Momentum Badge."
    • Skill Concentration: e.g., "Your highest skill velocity is currently in Frontend & Component Architecture (81%)."
  • Output: Fast, 100% reliable, zero-latency personalized insight cards displayed on /dashboard.

8. Persona Evaluation Signals (Industrial Perspective)

  • Senior Software Engineer: Appreciates the 5-stage Build Plan (Understand → Plan → Build → Verify → Publish) and Definition of Done checklist.
  • Product Manager: Appreciates the clear problem chain solution and seamless loop from discovery to portfolio showcase.
  • UX Designer: Appreciates 390px mobile viewport precision, high-contrast dark palette, subtle card entrance transitions, and touch-friendly targets ($\ge 44\text{px}$).
  • Engineering Manager: Appreciates clean TypeScript interfaces, modular components, and transparent proof verification terminology ("Link format verified").
  • Recruiter: Appreciates how 60 challenge days aggregate into verified GitHub repos and LinkedIn posts.
  • College Student: Appreciates non-punitive Recovery Mode after missing a day ("Your streak changed. Your journey didn't.").

9. Complete Edge-Case State Model (15 Scenarios)

  1. First Day / Day 1: "Your streak starts today. Everyone starts at Day 1." -> CTA: "Start Day 1"
  2. Active Streak (Day 12): 12-day streak, Day 12 active mission, 20% completion.
  3. Missed Yesterday (Grace): "You missed yesterday. That's okay. Your journey continues today." -> Recovery Mode badge + "Continue Today's Build".
  4. Multiple Missed Days: Recovery plan card outlining 3-step streak restoration.
  5. Streak at Risk: Warning pill indicating 4 hours remaining before deadline.
  6. Recovered Streak: Success alert displaying streak restored after completing catch-up quest.
  7. Day Completed: Verified badge + completed checkmark on matrix grid.
  8. Day In Progress: Task spec sheet open with Build Plan in progress.
  9. Proof Partially Submitted: GitHub proof verified, LinkedIn proof missing -> Amber status: "LinkedIn Missing".
  10. Proof Complete: Both GitHub and LinkedIn format verified -> Green status: "Ready to Complete".
  11. Empty Profile: "Your journey hasn't started yet. Complete your first build to start tracking your progress." -> CTA: "Start Building".
  12. Zero Achievements: Unlocked 0 badges state displaying next achievable badge progress.
  13. Halfway Builder (Day 30): 30-day milestone reached, 50% completion, Halfway Hero badge unlocked.
  14. Day 60 Final Build: Final challenge task active.
  15. Challenge Completed: 100% completion celebration banner with full portfolio showcase summary.

10. Hackathon Judging Rubric Alignment

  • Code Quality & Structure (25 Points):
    • Clean TypeScript interfaces (StudentProfile, ChallengeDay, SkillMomentum, ProofSubmission).
    • Modular component directory structure (components/ui/, components/shared/).
    • Zero build or lint errors (npm run build succeeds cleanly).
  • Features & Functionality (30 Points):
    • Proof verification workflow with GitHub & LinkedIn modals.
    • Interactive 5-stage Build Plan & Definition of Done.
    • Skill Growth System & Portfolio Momentum showcase.
    • Non-punitive Recovery Mode & 7 Judge State presets.
  • Technical Implementation (25 Points):
    • Next.js 16 App Router static prerendering & dynamic route handling.
    • Tailwind v4 @theme design tokens and Inter font optimization.
    • Fast page load performance and local state persistence.
  • User Experience & Design (20 Points):
    • 390px mobile viewport perfection wrapped in .mobile-viewport shell.
    • Refined obsidian glassmorphism aesthetic with high contrast ratios.
    • Micro-interactions (card entrance, streak celebration glow, touch active feedback).

11. Risks & Things NOT to Build

  • DO NOT add authentication (Clerk, NextAuth, Firebase Auth) — explicitly out of hackathon scope.
  • DO NOT add a production database (PostgreSQL, MongoDB) — local state fixtures are required.
  • DO NOT add heavy external LLM APIs — rate limit risk and latency during judging.
  • DO NOT turn UI into a cluttered, neon-heavy game — maintain professional developer tool aesthetic.
  • DO NOT break the 3 mandatory routes (/, /dashboard, /day/12).

12. TOP 5 FEATURES TO IMPLEMENT NEXT

  1. Skill Growth Momentum System
    • Visual breakdown across 5 core developer skill domains (Git & GitHub, Problem Solving, Frontend Systems, API & State, Product Architecture) showing proficiency percentages, levels, recent gains, and contributing builds.
  2. Interactive 5-Stage Build Plan & Definition of Done Checklist
    • 5-stage execution stepper (01. Understand → 02. Plan → 03. Build → 04. Verify → 05. Publish) and interactive acceptance criteria checkboxes on /day/12.
  3. Submission Readiness Checklist & Verified Link Proof Status
    • Quality gatekeeper verifying task review, build completion, and format verification before enabling the "Mark Day Complete" button.
  4. Portfolio Momentum & Smart Product Insights Engine
    • Dashboard cards aggregating public portfolio artifacts and deterministic student insights (weekday consistency, milestone proximity, skill velocity).
  5. Expanded 7-State Judge Scenario Switcher
    • Upgraded switcher drawer allowing judges to inspect 7 complete user states (Active Day 12, First Day, Missed Yesterday, Multiple Missed Days, Streak at Risk, Halfway Builder, Challenge Completed).