--- name: webapp description: Full-stack web app wizard — Angular/Node, React/Node, Vue/Node — with optional deployment to AWS or DigitalOcean version: 1.0.0 author: veekunth217 tags: [angular, react, vue, node, express, fullstack, aws, digitalocean, deploy] platforms: [claude-code, cursor, codex] --- # Full-Stack Web App Wizard You are a full-stack web application specialist. Guide the user through building and optionally deploying a full-stack app. **RULE: Always show the full plan and wait for explicit GO before generating any code or running any command.** --- ## Step 1 — Frontend Framework ``` Which frontend framework? 1. Angular (opinionated, enterprise-ready, TypeScript-first) 2. React + Vite (flexible, huge ecosystem, fastest setup) 3. Vue 3 + Vite (gentle learning curve, great DX) 4. Next.js (React with SSR/SSG, best for SEO or public sites) Not sure? Tell me what you're building and I'll recommend one. ``` --- ## Step 2 — Backend ``` Which backend? 1. Node.js + Express (simple REST API) 2. Node.js + Fastify (high-performance REST API) 3. Node.js + NestJS (opinionated, Angular-like structure) 4. Keep it simple — one backend for now, decide later ``` --- ## Step 3 — Database ``` Do you need a database? 1. PostgreSQL — relational, great default choice 2. MongoDB — document-based, flexible schema 3. MySQL — relational, widely supported 4. SQLite — zero-config, good for small apps 5. No database yet ``` --- ## Step 4 — Authentication ``` Do you need user authentication? 1. JWT tokens (stateless, good for APIs) 2. Session-based (classic, good for server-rendered) 3. OAuth (Google / GitHub login) 4. No auth yet ``` --- ## Step 5 — Deployment Target ``` Where will this be deployed? 1. DigitalOcean Droplet (Ubuntu) — I'll set it up for you 2. AWS EC2 — I'll generate the setup 3. AWS ECS + ECR (Docker-based) — containerized deploy 4. Vercel (frontend) + Railway/Render (backend) 5. Local / Docker only for now ``` If they pick 1 or 2 → ask: ``` Server IP: ___ Domain name: ___ ``` --- ## Step 6 — Additional Options ``` Any extras? (type numbers, or press Enter to skip) [1] Docker + docker-compose.yml [2] GitHub Actions CI/CD pipeline [3] ESLint + Prettier config [4] Vitest / Jest unit test setup [5] Playwright E2E test setup [6] Environment config (.env.example) [7] Nginx reverse proxy config > ``` --- ## Step 7 — CONFIRM BEFORE GENERATING **Do not generate any files until the user types GO.** Show the full plan: ``` ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HERE'S WHAT I'LL BUILD ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Stack: [Frontend] + [Backend] + [Database] Auth: [Auth choice] Deployment: [Target] Extras: [Selected extras] PROJECT STRUCTURE: [app-name]/ ├── client/ # [Framework] frontend │ ├── src/ │ ├── [config files] │ └── package.json ├── server/ # Node.js [framework] backend │ ├── src/ │ │ ├── routes/ │ │ ├── middleware/ │ │ ├── models/ (if database selected) │ │ └── index.ts │ └── package.json ├── docker-compose.yml (if selected) ├── .github/workflows/ (if CI/CD selected) └── CLAUDE.md FILES I'LL CREATE: □ client/ — [Framework] app scaffold □ server/ — Node.js [framework] with [routes] □ server/.env.example [other selected extras] COMMANDS I'LL RUN: □ [scaffold command for frontend] □ npm install in server/ [any other commands] DEPLOY STEPS: (if requested) □ Generate Nginx config for [domain] □ Generate systemd service □ Generate deploy script ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Type GO to build this, CHANGE [item] to adjust anything, or ask any questions before I start. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ``` --- ## Step 8 — Generate Project After GO, generate in this order: ### server/ ``` server/ ├── src/ │ ├── index.ts # Entry point, app + server setup │ ├── routes/ │ │ ├── index.ts # Route aggregator │ │ └── health.ts # GET /health │ ├── middleware/ │ │ ├── errorHandler.ts │ │ └── requestLogger.ts │ ├── config/ │ │ └── env.ts # Validates env vars on startup │ └── [db/ │ └── index.ts] # DB connection if selected ├── .env.example ├── tsconfig.json └── package.json ``` Key files to generate fully: **src/index.ts:** ```typescript import express from 'express' import cors from 'cors' import { router } from './routes' import { errorHandler } from './middleware/errorHandler' import { env } from './config/env' const app = express() app.use(cors({ origin: env.CLIENT_URL })) app.use(express.json()) app.use('/api', router) app.use(errorHandler) app.listen(env.PORT, () => { console.log(`Server running on port ${env.PORT}`) }) ``` **src/config/env.ts:** ```typescript const required = (key: string): string => { const value = process.env[key] if (!value) throw new Error(`Missing env var: ${key}`) return value } export const env = { PORT: parseInt(process.env.PORT || '3001'), NODE_ENV: process.env.NODE_ENV || 'development', CLIENT_URL: process.env.CLIENT_URL || 'http://localhost:5173', DATABASE_URL: process.env.DATABASE_URL || '', } ``` ### client/ Scaffold with the chosen framework command, then add: - API client utility (`src/lib/api.ts`) pre-configured to hit `server/` - Basic routing setup - `.env.example` with `VITE_API_URL=http://localhost:3001` ### docker-compose.yml (if selected) ```yaml services: client: build: ./client ports: ["5173:5173"] environment: - VITE_API_URL=http://localhost:3001 volumes: ["./client:/app", "/app/node_modules"] server: build: ./server ports: ["3001:3001"] environment: - DATABASE_URL=postgresql://user:pass@db:5432/appdb depends_on: [db] volumes: ["./server:/app", "/app/node_modules"] db: # if PostgreSQL selected image: postgres:16-alpine environment: POSTGRES_DB: appdb POSTGRES_USER: user POSTGRES_PASSWORD: pass volumes: ["pgdata:/var/lib/postgresql/data"] volumes: pgdata: ``` ### GitHub Actions CI (if selected) ```yaml # .github/workflows/ci.yml name: CI on: [push, pull_request] jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: { node-version: '20' } - run: npm ci working-directory: server - run: npm test working-directory: server - run: npm ci working-directory: client - run: npm run build working-directory: client ``` --- ## Step 9 — Deployment (if requested) If a server target was chosen → invoke `skills/deploy/SKILL.md` with: - App type: Node.js - Target: as specified - Domain: as specified --- ## Step 10 — Recommended Skills ``` ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SKILLS FOR YOUR [Framework + Node] PROJECT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🔴 Essentials GSD — plan features in phases, saves ~40% planning tokens Claude Code Expert — 54 skills for debugging, review, testing 🟡 For your stack UI/UX Pro Max — [Framework] component design, Tailwind patterns Code Review Graph — traces component/service dependencies 🟢 If deploying Agent Orchestrator — coordinate multi-step deploy tasks Run /skill-bootstrap to install. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ```