A Next.js web application for the 5-week AI Build Sprint: ship every week, build in public, learn fast, stack reps. Features complete rules, a scoring system, countdown timer, and weekly checklist.
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router, React Server Components) |
| Language | TypeScript 5 |
| UI Components | shadcn/ui (New York style) |
| Styling | Tailwind CSS 4 with CSS variables and oklch color space |
| Icons | Lucide React |
| Forms | React Hook Form + Zod validation |
| Charts | Recharts |
| Analytics | Vercel Analytics |
| Package Manager | pnpm |
- Node.js ≥ 18.17 (LTS recommended)
- pnpm ≥ 8 — install globally with
npm install -g pnpm
git clone <repo-url>
cd ai-build-sprintpnpm installpnpm devOpen http://localhost:3000 in your browser.
pnpm build
pnpm start| Command | Description |
|---|---|
pnpm dev |
Start the Next.js development server with hot reload |
pnpm build |
Create an optimized production build |
pnpm start |
Serve the production build locally |
pnpm lint |
Run ESLint across the project |
├── app/ # Next.js App Router
│ ├── globals.css # Tailwind imports, CSS custom properties (light/dark themes)
│ ├── layout.tsx # Root layout (fonts, metadata, analytics)
│ └── page.tsx # Main page — sprint rules, scoreboard, countdown
├── components/
│ ├── theme-provider.tsx # next-themes wrapper for dark/light mode
│ └── ui/ # shadcn/ui primitives (button, card, accordion, etc.)
├── hooks/
│ ├── use-mobile.ts # Responsive breakpoint hook (768px)
│ └── use-toast.ts # Toast notification state management
├── lib/
│ └── utils.ts # cn() helper — clsx + tailwind-merge
├── public/ # Static assets (favicons, images)
├── styles/
│ └── globals.css # Legacy/alternate global styles
├── components.json # shadcn/ui configuration
├── next.config.mjs # Next.js config
├── postcss.config.mjs # PostCSS config (@tailwindcss/postcss)
└── tsconfig.json # TypeScript config with @/* path alias
This project uses the shadcn/ui CLI. To add a new component:
npx shadcn@latest add <component-name>The configuration lives in components.json — components land in components/ui/, utils in lib/, and hooks in hooks/.
The app uses a CSS-variable-based theming system defined in app/globals.css:
- Light theme —
:rootselector - Dark theme —
.darkselector (applied by default via<html class="dark">) - Colors use the oklch color space for perceptually uniform transitions
- The accent color is a vivid blue-violet (
oklch(0.62 0.18 264))
To customize colors, edit the CSS custom properties in app/globals.css.
The project is configured for seamless deployment to Vercel:
# Install Vercel CLI
npm i -g vercel
# Deploy
vercelThe next.config.mjs has images.unoptimized: true set, making it compatible with static exports and other hosting providers.
This project is private. See the repository settings for access details.