Skip to content

README.md

Latest commit

 

History

History
161 lines (124 loc) · 6.65 KB

README.md

File metadata and controls

161 lines (124 loc) · 6.65 KB
Raw

🚀 Next.js SaaS Journey

Next.js React TypeScript Tailwind CSS

Server Components Server Actions App Router Zod

Tests Coverage Jest Testing Library

GitHub Copilot ADRs Conventional Commits

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

Built by @raphaelchpprt • 🔗 raphaelch.me