vercel-composition-patterns
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
SKILL.md
| Name | vercel-composition-patterns |
| Description | React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes. |
Music Practice Tracker
Track and improve your daily music practice. Mobile app + Admin dashboard.
Tech Stack
Backend: NestJS + PostgreSQL + Prisma Admin: Next.js Mobile: React Native / Expo Runtime: Bun
Quick Start
# Prerequisites: Bun 1.x, Docker
# 1. Initial Setup (run once)
make setup
# 2. Start Services
make docker-compose-up # PostgreSQL
make start-firebase-dev-emulators # Firebase Emulator (separate terminal)
# 3. Start Backend (App API / Admin API)
cd packages/apps/backend
bun run start:dev
# 4. Start Admin
cd packages/apps/admin
bun run start:dev
# 5. Start Mobile
cd packages/apps/mobile
bun run start:dev
Project Structure
packages/
├── apps/
│ ├── backend/ # API + Swagger docs
│ ├── admin/ # Admin dashboard
│ └── mobile/ # Mobile app
└── libs/ # Shared configs
Git Worktree Support
Work on multiple branches simultaneously with isolated environments.
How It Works
PORT_OFFSETassigns unique ports to each worktree (increments of 10).envis auto-generated with worktree-specific ports~/.music-practice-tracker-portsmanages port allocations globally
Creating a New Worktree
# Create worktree
git worktree add ../music-practice-tracker-feature-xxx feature/xxx
cd ../music-practice-tracker-feature-xxx
# Setup (auto-assigns available ports)
make setup
# Start services
make docker-compose-up
make start-firebase-dev-emulators
Port Allocation
| Service | Base | offset 0 | offset 10 | offset 20 |
|---|---|---|---|---|
| PostgreSQL (Dev) | 15432 | 15432 | 15442 | 15452 |
| PostgreSQL (Test) | 15433 | 15433 | 15443 | 15453 |
| App API | 3000 | 3000 | 3010 | 3020 |
| Admin API | 3001 | 3001 | 3011 | 3021 |
| Admin UI | 8000 | 8000 | 8010 | 8020 |
| Firebase Auth | 9099 | 9099 | 9109 | 9119 |
Management Commands
| Command | Description |
|---|---|
make wt-status | Show current worktree config and container status |
make wt-ports | List all ports in use |
make wt-list | List all worktrees with Docker status |
make wt-clean | Remove containers and volumes for current worktree |
make ports-list | Show registered port offsets |
make ports-cleanup | Remove entries for non-existent directories |
Cleanup
make wt-clean # Remove Docker resources
git worktree remove ../music-practice-tracker-feature-xxx # Remove worktree
make ports-cleanup # Clean port registry
Development
# Quality checks (Turborepo - parallel execution)
bun turbo lint:es:check type:check # ESLint + TypeScript
bun turbo test # All tests
# Individual checks
bun run lint:es:check:root # Root ESLint only
bun run type:check:root # Root TypeScript only
# Testing
bun turbo test # All package tests (parallel)
cd packages/apps/admin && bun run test:e2e # Admin E2E (Playwright)
cd packages/apps/mobile && bun run test:e2e # Mobile E2E (Maestro)
# Database
bun run prisma:studio # GUI at localhost:5555
bun run prisma:migrate:dev
# API Docs (check .env for actual ports)
# http://localhost:${APP_API_PORT}/api - App API
# http://localhost:${ADMIN_API_PORT}/api - Admin API
Turborepo
This monorepo uses Turborepo for build optimization with intelligent caching.
# Common commands
bun turbo build # Build all packages
bun turbo lint:es:check type:check # Parallel lint + type check
bun turbo test # Run all tests
bun turbo start:dev # Start all apps
# Filter by package (use package name or path)
bun turbo build --filter=@music-practice-tracker/backend
bun turbo test --filter=./packages/apps/admin
Remote Cache
CI uses Vercel Remote Cache for faster builds. Configure locally (optional):
bunx turbo login
bunx turbo link
License
Proprietary software. See LICENSE. For inquiries: takuya.iwashiro@takudev.net