Skip to content

PROMPTS.md

Latest commit

 

History

History
235 lines (178 loc) · 12.6 KB

PROMPTS.md

File metadata and controls

235 lines (178 loc) · 12.6 KB
Raw

PROMPTS.md — AI-Assisted Development Log

This document records the actual AI-assisted development prompts and implementation steps used to build the ABTalks 60-Day Coding Challenge Redesign (Problem Statement 1).

1. Project Planning & Architecture Proposal

Prompt

"We are building a hackathon project for ABTalks Problem Statement 1: Redesign ABTalks. Read and follow this exact product scope: Required routes: /, /dashboard, /day/12. The judges will automatically inspect all three routes at 390px mobile viewport. First, inspect the existing project structure. Do NOT implement the complete application yet. Instead:

  1. Propose the architecture.
  2. Propose the component structure.
  3. Propose the data model.
  4. Propose the visual design system.
  5. Explain how the three routes will share components.
  6. Wait for the next instruction."

Implementation

  • Inspected Next.js 16 App Router project structure.
  • Created implementation_plan.md artifact.
  • Proposed mobile-first architecture for 390px viewport, client-side React Context state store with preset state switching for judges, component breakdown, and local mock data model.

2. Design System & CSS Tokens Setup

Prompt

"Create the design system for the ABTalks Problem Statement 1 redesign. Use:

  • Typography: Inter
  • Background: near-black/deep charcoal
  • Primary: ABTalks purple
  • Accent: electric violet/blue
  • Success: green
  • Foreground/text: white
  • Muted text: muted gray
  • Border: subtle dark gray
  • Card: slightly lighter than the background Keep the palette minimal. Do not introduce unnecessary colors. Create reusable design tokens... Make the design mobile-first for the required 390px viewport."

Implementation

  • Updated app/globals.css with CSS variables (--background: #0b0b0e, --card: #14141a, --primary: #7c3aed, --accent: #6366f1, --success: #10b981, --border: #27272a) mapped via Tailwind CSS v4 @theme.
  • Loaded Inter font via next/font/google in app/layout.tsx.
  • Created .mobile-viewport container utility targeting 390px mobile viewports.

3. Shared Design System Components

Prompt

"Now implement the shared design system and reusable components. Create a polished mobile-first design system for the ABTalks redesign. Create reusable components for: Header, Logo, PrimaryButton, SecondaryButton, Card, ProgressBar, StreakCard, TaskCard, AchievementBadge, SectionHeader, ChallengeTimeline, ProofSubmissionCard, StatusBadge, EmptyState, MissedDayRecoveryCard, BottomNavigation if appropriate..."

Implementation

  • Installed lucide-react icon library.
  • Built modular UI components: Logo, PrimaryButton, SecondaryButton, Card, ProgressBar, StreakCard, TaskCard, AchievementBadge, SectionHeader, ChallengeTimeline, ProofSubmissionCard, StatusBadge, EmptyState, MissedDayRecoveryCard, Header, BottomNavigation, and JudgeStateSwitcher.

4. Typed Local Mock Dataset

Prompt

"Create realistic local mock data for the ABTalks Vibe Code Hackathon — Problem Statement 1. Create: src/data/challenge.ts, src/data/student.ts Include typed data for:

  1. Student profile (name, current day = 12, streak, completed days, total days = 60, overall completion, achievements)
  2. All 60 challenge days
  3. Today's Day 12 task
  4. Proof submission states (GitHub, LinkedIn, statuses)
  5. Edge-case states required (first day / no streak, missed day, empty profile)..."

Implementation

  • Created src/data/student.ts with StudentProfile and Achievement interfaces and profile presets (mockStudentActiveStreak, mockStudentFirstDay, mockStudentMissedDay, mockStudentEmptyProfile).
  • Created src/data/challenge.ts with ChallengeDay, ProofSubmission, TodayTask interfaces, full 60-day dataset, Day 12 task spec, and getChallengeDaysForPreset(...) state scenario generator.

5. Landing Page (/)

Prompt

"Build the landing page at /. The page must communicate ABTalks clearly to a student who has never heard of it. Structure:

  1. Compact header
  2. Hero: "60 DAYS. ONE BUILD EVERY DAY."
  3. Supporting explanation
  4. Primary CTA
  5. Simple explanation of how the challenge works
  6. 4-step journey: Pick a track → Build → Commit → Share
  7. Progress/momentum visual
  8. Social-proof style section using clearly labeled mock/sample data only
  9. Final CTA"

Implementation

  • Built app/page.tsx adhering to the 9-part structure for 390px mobile viewports.
  • Integrated SAMPLE DEMO DATA social proof cards with explicit disclaimers and navigation CTAs leading to /dashboard and /day/12.

6. Student Dashboard (/dashboard)

Prompt

"Build /dashboard. This is the authenticated-looking student home screen, but authentication is NOT required. Use mocked student data. Design the dashboard around one central question: 'What should I do today?' Make today's task visually dominant. Include: greeting, streak card, Day 12 / 60 progress, today's mission, challenge journey, achievements, recovery state for a missed day. Add a thoughtful product feature: 'Recovery Mode' for students who missed a day."

Implementation

  • Built app/dashboard/page.tsx centered around Today's Mission — Day 12.
  • Implemented StreakCard, 60-day interactive matrix grid (ChallengeTimeline), ProgressBar, AchievementBadge list, and MissedDayRecoveryCard.

7. Challenge Day Page (/day/12)

Prompt

"Build /day/12. This is the complete experience of a single challenge day. It must allow the student to: understand the day's task, understand what needs to be built, see requirements, see estimated effort/skills, submit GitHub repository/commit proof, submit LinkedIn post proof, complete the day. Create a clear progression: BUILD ↓ PROVE ↓ SHARE ↓ COMPLETE..."

Implementation

  • Built app/day/[dayId]/page.tsx with a 4-stage workflow stepper banner (BUILD → PROVE → SHARE → COMPLETE), task specification card, real-time URL link validation, and peer submissions feed.

8. Required Edge-Case States Implementation

Prompt

"Implement the three required edge cases for ABTalks Problem Statement 1:

  1. FIRST DAY / NO STREAK ("Your streak starts today.", "Everyone starts at Day 1.", CTA: "Start Day 1")
  2. MISSED DAY ("You missed yesterday.", "That's okay. Your journey continues today.", "Recovery Mode", CTA: "Continue Today's Build")
  3. EMPTY PROFILE ("Your journey hasn't started yet.", "Complete your first build to start tracking your progress.", CTA: "Start Building")..."

Implementation

  • Created FirstDayCard.tsx with exact requested text copy.
  • Updated MissedDayRecoveryCard.tsx and EmptyState.tsx to match the exact copy requirements.
  • Integrated all three edge-case cards into /dashboard and JudgeStateSwitcher.

9. Interactive Proof Modals & Day 12 Completion Overlay

Prompt

"Improve the existing ABTalks /day/12 experience so the interactions feel like a real product. Implement:

  1. GitHub proof (Add GitHub Link opens modal, empty validation, shows submitted state, edit link option)
  2. LinkedIn proof (Add LinkedIn Post opens modal, empty validation, shows submitted state, edit link option)
  3. Day completion ('Mark Day Complete' disabled until both proofs added, shows 🎉 Day 12 complete!, +1 day added to your challenge, 🔥 13 day streak, You're building momentum, CTA: 'Continue to Day 13')..."

Implementation

  • Updated app/day/[dayId]/page.tsx with interactive backdrop-blurred modal dialogs for GitHub and LinkedIn link entry and editing.
  • Added strict button disabling logic until both proof links are added.
  • Built the completion modal overlay displaying the exact celebratory text copy and CTA.

10. Micro-Interactions & Motion Accessibility

Prompt

"Add subtle, polished micro-interactions to the existing ABTalks redesign. Implement only these:

  1. Progress bar (smooth animate progress)
  2. Buttons (subtle hover/tap feedback)
  3. Cards (subtle entrance animation)
  4. Success state (smooth transition)
  5. Streak celebration (short, tasteful celebration animation)... Respect prefers-reduced-motion..."

Implementation

  • Added .animate-card-entrance (250ms slide up + fade in) and .animate-streak-celebrate (1.2s flame pulse & glow) to app/globals.css.
  • Updated PrimaryButton and SecondaryButton with hover:-translate-y-0.5 and mobile active:scale-[0.97] tap feedback.
  • Added @media (prefers-reduced-motion: reduce) CSS overrides.

11. Connected Developer Momentum, Skill Growth & Portfolio System

Prompt

"Build a connected system: BUILD → PROVE → SHARE → GROW → RECOVER WHEN NEEDED → RETURN TO BUILDING → SHOWCASE PROGRESS. The system must solve a chain of connected student problems rather than presenting unrelated features. Create/upgrade a Developer Momentum experience combining current streak, completed builds, proof artifacts, skills strengthened, recent activity, and milestones. Connect completed challenge work to skill development..."

Implementation

  • Created SkillGrowthCard.tsx displaying visual skill progress across 5 engineering domains (Git & GitHub, Frontend Systems, Problem Solving, API & State, Product Architecture).
  • Created BuildPlanStepper.tsx for an interactive 5-stage task execution plan (01. Understand → 02. Plan → 03. Build → 04. Verify → 05. Publish).
  • Created DefinitionOfDone.tsx for acceptance criteria checks.
  • Created SubmissionReadiness.tsx gatekeeper checklist.
  • Created PortfolioMomentumCard.tsx aggregating public GitHub repos, LinkedIn posts, and artifacts.
  • Created SmartInsightsCard.tsx generating real-time deterministic insights from student state.
  • Created RecentBuildHistory.tsx and MilestoneTracker.tsx.
  • Updated JudgeStateSwitcher.tsx to support 7 scenario presets.
  • Connected Day 12 completion to increment streak (🔥 13 Days), update skill percentages (+4%), update portfolio counts, and generate real-time insights on /dashboard.

12. Build Intelligence Layer

Prompt

"Add one focused Build Intelligence capability. The goal is NOT to add a generic chatbot. The goal is to help a student answer: 'What should I do next, and how should I approach it?' Create a connected intelligence loop: CURRENT PROGRESS → CURRENT TASK → SKILLS / PROOF / HISTORY → BUILD ANALYSIS → PERSONALIZED NEXT ACTION → BUILD PLAN → PROOF → GROWTH..."

Implementation

  • Created src/domain/buildIntelligence.ts domain logic module calculating deterministic Build Readiness Score (0-100%), Next Best Action decision tree, and explainable recommendations.
  • Created BuildIntelligenceCard.tsx UI component displaying readiness factor checklist, prominent Next Best Action CTA button, and expandable "Why this recommendation?" drawer.
  • Integrated BuildIntelligenceCard into /dashboard and /day/12 with real-time state recalculation.
  • Added product benefit banner on / landing page ("ABTalks adapts your next step to your daily building progress").

13. Final Production-Grade UX, Visual & Interaction Pass

Prompt

"Perform a complete UI, typography, interaction, accessibility, and responsive pass to make the complete product feel like a serious developer-growth platform designed by a professional product team..."

Implementation

  • Audited and refined visual hierarchy, card margins, padding scales, and typography sizes across all components and pages.
  • Standardized minimum 44px mobile touch targets on all buttons and interactive controls.
  • Enforced focus accessibility rings (focus-visible:ring-2 focus-visible:ring-primary) and motion accessibility reduction rules (@media (prefers-reduced-motion: reduce)).
  • Validated zero viewport overflow across 390px, 375px, and 360px mobile device viewports.
  • Ran Next.js production build (npm run build) and verified zero errors and clean static page generation.

14. Final High-Impact Hardening & Submission Defense

Prompt

"Perform a final hardening pass. Fix high-impact weaknesses identified in the red-team audit, add LocalStorage client-side persistence for build plan steps, audit copy for credibility, verify all 7 judge scenarios, verify mobile viewports (390px, 375px, 360px), and verify git status..."

Implementation

  • Added lightweight, safe LocalStorage client-side persistence in app/day/[dayId]/page.tsx for buildPlanSteps and dodItems checkbox toggles.
  • Audited all metrics, text labels, and preset descriptions to ensure 100% transparent and credible copy.
  • Validated clean production compilation via npm run build.
  • Verified git status to confirm clean file tracking before submission.