74 lines (52 loc) · 3.14 KB

☕ Dialed In - Next.js Coffee Logger

A personal coffee logging app built while learning Next.js fundamentals.
Track your daily brews, improve your technique, and master Next.js.

📚 Project Structure

This project follows the official Next.js tutorial structure, divided into digestible phases:

Phase	Tutorial Chapters	What You'll Build	File
1. Foundation	Ch 1-5	Basic app structure, styling, navigation	→ Phase 1
2. Database	Ch 6-8	Database setup, data fetching, rendering	→ Phase 2
3. Performance	Ch 9-10	Streaming, Partial Prerendering	→ Phase 3
4. Interactivity	Ch 11-12	Search, CRUD operations	→ Phase 4
5. Production	Ch 13-16	Errors, a11y, auth, SEO	→ Phase 5

📊 Data Model Overview

The app tracks four main entities:

Coffee Beans - Your bean inventory
Brew Methods - Espresso, V60, Chemex, etc.
Coffee Logs - Individual brew records
Equipment - Your coffee gear

See data-model.md for complete schema.

✅ Learning Checklist

Track your progress through each phase:

Phase 1: App structure, styling, navigation
Phase 2: Database, data fetching
Phase 3: Streaming, PPR
Phase 4: Search, CRUD with Server Actions
Phase 5: Production features

🚀 How to Use This Guide

Start with Phase 1 - Build the foundation
Complete each story in order - They build on each other
Check off acceptance criteria - Know when you're done
Compare with the tutorial - Ensure you're learning the concepts
Test after each story - Make sure everything works

💡 Key Learning Goals

By the end of this project, you'll understand:

Server vs Client Components - When to use each
Data Fetching Patterns - Direct SQL in components
Server Actions - Forms without API routes
Rendering Strategies - Static, dynamic, streaming, PPR
Production Features - Auth, SEO, accessibility

🎨 What Makes This Special

Unlike generic tutorial projects, BrewLog is:

Personal - You'll actually use it daily
Unique - Stand out in your portfolio
Practical - Solves a real problem
Expandable - Grow it with your coffee journey

📝 Project Conventions

TypeScript - Type safety throughout
Server Components by default - Use "use client" sparingly
Server Actions - No separate API routes
URL state - Search params for filters
Progressive Enhancement - Works without JavaScript

Ready to start? → Begin with Phase 1