https://github.com/raphaelchpprt/nextjs-saas-journey
https://github.com/raphaelchpprt/nextjs-saas-journey
Last synced: 2 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/raphaelchpprt/nextjs-saas-journey
- Owner: raphaelchpprt
- Created: 2025-09-24T08:10:47.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-09-30T10:58:40.000Z (9 months ago)
- Last Synced: 2025-09-30T11:32:58.013Z (9 months ago)
- Language: TypeScript
- Size: 121 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 Next.js SaaS Journey
[](https://nextjs.org/)
[](https://react.dev/)
[](https://www.typescriptlang.org/)
[](https://tailwindcss.com/)
[](https://nextjs.org/docs/app/building-your-application/rendering/server-components)
[](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations)
[](https://nextjs.org/docs/app)
[](https://zod.dev/)
[](https://github.com/raphaelchpprt/nextjs-saas-journey)
[](https://github.com/raphaelchpprt/nextjs-saas-journey)
[](https://jestjs.io/)
[](https://testing-library.com/)
[](https://github.com/features/copilot)
[](./docs/adr/)
[](https://www.conventionalcommits.org/)
> 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](./docs/adr/)**: 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](./docs/adr/) and [commit history](https://github.com/raphaelchpprt/nextjs-saas-journey/commits/main) to see context engineering in practice.
## 🚀 Quick Start
```bash
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](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**.
```bash
# Run all tests
npm test # Watch mode
npm test -- --coverage # Coverage report
```
**97.29% coverage** • 45 passing tests
📄 [ADR 0005 - Testing Strategy](./docs/adr/0005-testing-strategy.md)
## 📖 Documentation
- **📋 Overview**: [`docs/DECISIONS.md`](./docs/DECISIONS.md)
- **🏗️ ADRs**: [`docs/adr/`](./docs/adr/) (6 architectural decisions)
- **🤝 Contributing**: [`CONTRIBUTING.md`](./CONTRIBUTING.md)
---
**Built by [@raphaelchpprt](https://github.com/raphaelchpprt)** • 🔗 [raphaelch.me](https://raphaelch.me)