React Six Pack

A collection of 6 simple, polished React applications demonstrating modern best practices.

Project Structure

• apps/: Source code for each application (independent Next.js projects)
• PRPs/: Implementation plans for each app
• Obsidian/: Documentation and ideas
• HANDOFF.md: Complete project context for AI handoff

The Apps

App	What It Does
Espresso Calculator	Ratio calculator for espresso brewing
Watson	Espresso shot logger (literary: Dr. Watson, the documenter)
Font Scale	Typography scale visualizer
Contrast Checker	WCAG color contrast checker
Atlas	Barbell plate calculator (literary: the titan who holds weight)
Macro Calculator	Quick macro/calorie estimator

Stack

• Next.js 15 (App Router)
• TypeScript (strict)
• Tailwind CSS + shadcn/ui
• Zustand (where persistence needed)
• Zod (where validation needed)

Quick Start

cd apps/[app-name]
npm install
npm run dev

Documentation

• HANDOFF.md - Full project context and implementation guide
• Ideas.md - Original app concepts
• React-Best-Practices.md - Coding standards
• PRPs/story_[app-name].md - Detailed implementation plan per app