🚀 Next.js SaaS Journey

A comprehensive Next.js 15 learning project built with GitHub Copilot, demonstrating modern patterns, testing strategies, and AI-assisted context engineering.

🎯 Main Projects

📝 Task Manager

Complete CRUD application with task management.

• Add, complete, and delete tasks
• Filters (All/Active/Completed)
• Optimistic UI with useOptimistic
• Zod validation
• 98%+ test coverage

📊 Dashboard

Server/Client architecture demonstration.

• Async Server Components with data fetching
• Interactive Client Components
• Server Actions for mutations
• Suspense and streaming

🎨 Design System

Reusable component library.

• Card components with CVA
• React Context API
• Compound component pattern
• Variants: default, highlighted, danger

🛠️ Tech Stack

Category	Technologies
Framework	Next.js 15.5.4 (App Router)
Language	TypeScript (strict mode)
UI	Tailwind CSS 4.0 + CVA
Validation	Zod 4.1.11
Testing	Jest + React Testing Library
State	React 19.1.0 (useOptimistic, useTransition)

📚 Demonstrated Concepts

• ✅ Server Components vs Client Components
• ✅ Server Actions for type-safe mutations
• ✅ Optimistic UI with useOptimistic
• ✅ Zod Validation with TypeScript
• ✅ Comprehensive Testing (97%+ coverage)
• ✅ Design System with CVA
• ✅ Architecture Decision Records (ADRs)

🤖 Context Engineering Focus

This project demonstrates advanced AI collaboration techniques using GitHub Copilot with structured context management.

How Context Was Engineered

Documentation as Persistent Memory

• 6 ADRs: Technical decisions documented before implementation
• Conversation Summaries: Context preserved across development sessions
• Structured Docs: DECISIONS.md, CHANGELOG.md, CONTRIBUTING.md

Development Process

1. Write ADR with requirements → 2. Build with Copilot → 3. Test (97% coverage) → 4. Update context

Key Results

• 97% test coverage through context clarity
• Zero breaking changes via full context awareness
• Consistent architecture maintained by ADRs

Learn More: Explore ADRs and commit history to see context engineering in practice.

🚀 Quick Start

git clone https://github.com/raphaelchpprt/nextjs-saas-journey.git
cd nextjs-saas-journey
npm install
npm run dev              # Start development server
npm test                 # Run tests (97% coverage)

Open http://localhost:3000

📁 Project Structure

src/
├── app/
│   ├── page.tsx              # Home page
│   ├── dashboard/            # Dashboard feature
│   │   ├── page.tsx          # Server Component
│   │   ├── action.ts         # Server Actions
│   │   ├── db.ts             # Data layer
│   │   └── components/       # Feature components
│   └── tasks/                # Task Manager feature
│       ├── page.tsx          # Server Component
│       ├── actions.ts        # Server Actions
│       ├── db.ts             # In-memory database
│       ├── types.ts          # Zod schemas + types
│       └── components/       # Feature components
├── components/               # Shared components
│   ├── Card.tsx             # Design system
│   └── Header.tsx           # Navigation
└── lib/
  └── utils.ts             # Utility functions

docs/
├── DECISIONS.md             # Quick overview
└── adr/                     # Detailed ADRs
  ├── 0001-*.md
  ├── 0002-*.md
  └── ...

🧪 Testing

This project maintains 97%+ code coverage.

# Run all tests
npm test                 # Watch mode
npm test -- --coverage   # Coverage report

97.29% coverage • 45 passing tests

📄 ADR 0005 - Testing Strategy

📖 Documentation

• 📋 Overview: docs/DECISIONS.md
• 🏗️ ADRs: docs/adr/ (6 architectural decisions)
• 🤝 Contributing: CONTRIBUTING.md

---

Built by @raphaelchpprt • 🔗 raphaelch.me