scripte/ai-coding-starter-kit-v2
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: rework starter kit for self-hosted deploy (Vite/React + Fastify/Drizzle/Postgres)

Browse Source 
Replace Next.js/Supabase/Vercel stack with a self-hostable setup: Vite+React
frontend, Fastify+Drizzle+PostgreSQL backend with own JWT auth, deploy via
git pull + rsync + systemd (checkout/service separated, updates pulled from
Gitea). Adds a reference auth route (register/login/me) as the canonical
pattern for new routes. Updates all skills/rules/agents/docs to match.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BMdBJfD9TT6XUU2NqGG1PN
This commit is contained in:
patrickandClaude Sonnet 5 committed 2026-09-08 11:42:47 +02:00
1 parent a893084a88
commit 4a19335a1e
99 files changed
+8898 -9835
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

README.md
+53 -53
View File
@@ -1,6 +1,6 @@
# AI Coding Starter Kit
> Build production-ready web apps faster with AI-powered Skills handling Requirements, Architecture, Development, QA, and Deployment.
> Build production-ready web apps faster with AI-powered Skills handling Requirements, Architecture, Development, QA, and Deployment. Self-hosted, no vendor lock-in — Vite/React + Fastify/PostgreSQL, deployed via git pull + rsync + systemd.
This template uses [Claude Code](https://docs.anthropic.com/en/docs/claude-code) with modern Skills, Rules, and Sub-Agents to provide a complete AI-powered development workflow.
@@ -9,30 +9,28 @@ This template uses [Claude Code](https://docs.anthropic.com/en/docs/claude-code)
### 1. Clone & Install
```bash
git clone https://github.com/YOUR_USERNAME/ai-coding-starter-kit.git my-project
git clone <your-gitea-url>/ai-coding-starter-kit.git my-project
cd my-project
npm install
cd frontend && npm install && cd ..
cd backend && npm install && cd ..
```
### 2. (Optional) Supabase Setup
### 2. Set Up PostgreSQL
If you need a backend:
1. Create a local PostgreSQL database and role for the app
2. Copy `backend/.env.example` to `backend/.env`
3. Set `DATABASE_URL` and `JWT_SECRET`
4. Run `cd backend && npm run db:generate && npm run db:migrate`
1. Create Supabase Project: [supabase.com](https://supabase.com)
2. Copy `.env.local.example` to `.env.local`
3. Add your Supabase credentials
4. Uncomment the Supabase client in `src/lib/supabase.ts`
Skip this step if you're building frontend-only (landing pages, portfolios, etc.)
Skip the backend entirely if you're building frontend-only (landing pages, portfolios, etc.) — just run the frontend.
### 3. Start Development
```bash
npm run dev
cd backend && npm run dev # localhost:4000
cd frontend && npm run dev # localhost:5173, proxies /api to the backend
```
Open [http://localhost:3000](http://localhost:3000) in your browser.
### 4. Initialize Your Project
Open Claude Code and describe your project. The `/requirements` skill automatically detects that this is a fresh project and enters **Init Mode**:
@@ -61,7 +59,7 @@ After project initialization, build features one at a time using skills:
/frontend Build the UI for features/PROJ-1-user-auth.md
/backend Build the API for features/PROJ-1-user-auth.md
/qa Test features/PROJ-1-user-auth.md
/deploy Deploy to Vercel
/deploy Deploy to your server
```
Each skill suggests the next step when it finishes. Handoffs are always user-initiated.
@@ -77,9 +75,9 @@ To add more features later, run `/requirements` again - it detects the existing
| Requirements Engineer | `/requirements` | Creates feature specs with user stories, acceptance criteria, edge cases |
| Solution Architect | `/architecture` | Designs PM-friendly tech architecture (no code, only high-level design) |
| Frontend Developer | `/frontend` | Builds UI with React, Tailwind CSS, and shadcn/ui |
| Backend Developer | `/backend` | Builds APIs, database schemas, RLS policies with Supabase |
| Backend Developer | `/backend` | Builds APIs, database schema, and auth with Fastify + Drizzle + PostgreSQL |
| QA Engineer | `/qa` | Tests features against acceptance criteria + security audit |
| DevOps | `/deploy` | Deploys to Vercel with production-ready checks |
| DevOps | `/deploy` | Deploys to your server (git pull + rsync + systemd) with production-ready checks |
| Help | `/help` | Context-aware guide: shows where you are and what to do next |
### How Skills Work
@@ -99,7 +97,7 @@ To add more features later, run `/requirements` again - it detects the existing
3. Build /frontend --> UI components implemented
/backend --> APIs + database (if needed)
4. Test /qa --> Test results added to feature spec
5. Ship /deploy --> Deployed to Vercel
5. Ship /deploy --> Deployed to your server
```
### Feature Tracking
@@ -119,12 +117,13 @@ Every skill reads this file at start and updates it when done, preventing duplic
| Category | Tool | Why? |
|----------|------|------|
| **Framework** | Next.js 16 | React + Server Components + App Router |
| **Frontend** | Vite + React 19 | Fast dev server, no framework lock-in |
| **Language** | TypeScript | Type safety |
| **Styling** | Tailwind CSS | Utility-first CSS |
| **UI Library** | shadcn/ui | Copy-paste, customizable components |
| **Backend** | Supabase (optional) | PostgreSQL + Auth + Storage + Realtime |
| **Deployment** | Vercel | Zero-config Next.js hosting |
| **Backend** | Fastify + Drizzle + PostgreSQL | Lightweight, typed, self-hostable |
| **Auth** | Own JWT (`@fastify/jwt`) | No third-party auth dependency |
| **Deployment** | git pull + rsync + systemd | Runs on any Linux server, updates pulled from Gitea |
| **Validation** | Zod | Runtime type validation |
---
@@ -140,7 +139,7 @@ ai-coding-starter-kit/
| +-- rules/ <-- Auto-applied coding rules
| | +-- general.md Git workflow, feature tracking
| | +-- frontend.md shadcn/ui, component standards
| | +-- backend.md RLS, validation, queries
| | +-- backend.md Validation, queries, migrations
| | +-- security.md Secrets, headers, auth
| +-- skills/ <-- Invocable workflows (/command)
| | +-- requirements/SKILL.md /requirements
@@ -160,18 +159,23 @@ ai-coding-starter-kit/
+-- docs/
| +-- PRD.md <-- Product Requirements Document
| +-- production/ <-- Production setup guides
| +-- error-tracking.md Sentry setup (5 min)
| +-- error-tracking.md Error tracking setup
| +-- security-headers.md XSS/Clickjacking protection
| +-- performance.md Lighthouse, optimization
| +-- database-optimization.md Indexing, N+1, caching
| +-- rate-limiting.md Upstash Redis
+-- src/
| +-- app/ <-- Pages (Next.js App Router)
| +-- components/
| | +-- ui/ <-- shadcn/ui components (35+ installed)
| +-- hooks/ <-- Custom React hooks
| +-- lib/ <-- Utilities
+-- public/ <-- Static files
| +-- rate-limiting.md @fastify/rate-limit
+-- frontend/
| +-- src/
| | +-- main.tsx, App.tsx <-- Entry points
| | +-- components/ui/ <-- shadcn/ui components (35+ installed)
| | +-- hooks/ <-- Custom React hooks
| | +-- lib/ <-- Utilities
| +-- public/ <-- Static files
+-- backend/
+-- src/
+-- server.ts <-- Fastify entry
+-- routes/ <-- Route handlers
+-- db/ <-- Drizzle schema + connection
```
---
@@ -195,7 +199,7 @@ Run `/requirements` with your feature idea. The skill will:
### 3. Add shadcn/ui Components (as needed)
35+ components are pre-installed. Add more as needed:
35+ components are pre-installed. Add more as needed (run inside `frontend/`):
```bash
npx shadcn@latest add [component-name]
```
@@ -203,8 +207,8 @@ npx shadcn@latest add [component-name]
### 4. Production Setup (first deployment)
When you're ready to deploy, the `/deploy` skill guides you through:
- Vercel setup and deployment
- Error tracking with Sentry
- Server setup (systemd unit, nginx reverse proxy, PostgreSQL)
- Error tracking
- Security headers configuration
- Performance monitoring with Lighthouse
@@ -222,7 +226,7 @@ Each skill is a structured workflow that Claude Code discovers automatically. Sk
| `/requirements` | Inline | Needs live interaction with user |
| `/architecture` | Inline | Short output, user reviews in real-time |
| `/frontend` | Sub-agent (forked) | Heavy file editing, lots of output |
| `/backend` | Sub-agent (forked) | Heavy file editing, SQL, API code |
| `/backend` | Sub-agent (forked) | Heavy file editing, schema, route code |
| `/qa` | Sub-agent (forked) | Systematic testing, lots of output |
| `/deploy` | Inline | Deployment needs user oversight |
| `/help` | Inline | Quick status check and guidance |
@@ -288,36 +292,32 @@ This template is designed as a starting point. Customize it for your team:
Standalone guides in `docs/production/`:
| Guide | Setup Time | What It Does |
|-------|-----------|-------------|
| [Error Tracking](docs/production/error-tracking.md) | 5 min | Sentry integration for automatic error capture |
| [Security Headers](docs/production/security-headers.md) | 2 min | XSS, Clickjacking, MIME sniffing protection |
| [Performance](docs/production/performance.md) | 10 min | Lighthouse checks, image optimization, caching |
| [Database Optimization](docs/production/database-optimization.md) | 15 min | Indexing, N+1 prevention, query optimization |
| [Rate Limiting](docs/production/rate-limiting.md) | 10 min | Upstash Redis for API abuse prevention |
| Guide | What It Does |
|-------|-------------|
| [Error Tracking](docs/production/error-tracking.md) | Automatic error capture setup |
| [Security Headers](docs/production/security-headers.md) | XSS, Clickjacking, MIME sniffing protection |
| [Performance](docs/production/performance.md) | Lighthouse checks, image optimization, caching |
| [Database Optimization](docs/production/database-optimization.md) | Indexing, N+1 prevention, query optimization |
| [Rate Limiting](docs/production/rate-limiting.md) | `@fastify/rate-limit` for API abuse prevention |
---
## Scripts
```bash
npm run dev # Development server (localhost:3000)
# frontend/
npm run dev # Vite dev server (localhost:5173)
npm run build # Production build
npm run start # Production server
npm run lint # ESLint
# backend/
npm run dev # tsx watch (localhost:4000)
npm run build # tsc build
npm run start # node dist/server.js
```
---
## Author
Created by **Alex Sprogis** – AI Product Engineer & Content Creator.
- [YouTube](https://www.youtube.com/@alex.sprogis)
- [Website](https://alexsprogis.de)
---
## License
MIT License - feel free to use for your projects!