2688 Project Scaffold Dbbcadf2

---
name: project-scaffold
description: >
  Generate complete fullstack project structure with all boilerplate
shortcut: ps
category: devops
difficulty: beginner
estimated_time: 5-10 minutes
---
# Project Scaffold

Generates a complete fullstack project structure with frontend, backend, database, authentication, testing, and deployment configuration.

## What This Command Does

**Generated Project:**
-  Frontend (React + TypeScript + Vite)
-  Backend (Express or FastAPI)
-  Database (PostgreSQL + Prisma/SQLAlchemy)
-  Authentication (JWT + OAuth)
-  Testing (Jest/Pytest + E2E)
-  CI/CD (GitHub Actions)
-  Docker setup
-  Documentation

**Output:** Production-ready fullstack application

**Time:** 5-10 minutes

---

## Usage

```bash
# Generate fullstack project
/project-scaffold "Task Management App"

# Shortcut
/ps "E-commerce Platform" --stack react,express,postgresql

# With specific features
/ps "Blog Platform" --features auth,admin,payments,analytics
```

---

## Generated Structure

```
my-app/
├── client/                    # Frontend (React + TypeScript + Vite)
│   ├── src/
│   │   ├── components/       # React components
│   │   ├── pages/            # Page components
│   │   ├── hooks/            # Custom hooks
│   │   ├── services/         # API services
│   │   ├── context/          # Context providers
│   │   ├── utils/            # Utilities
│   │   ├── types/            # TypeScript types
│   │   ├── App.tsx
│   │   └── main.tsx
│   ├── public/
│   ├── index.html
│   ├── package.json
│   ├── vite.config.ts
│   ├── tsconfig.json
│   └── tailwind.config.js
│
├── server/                    # Backend (Express + TypeScript)
│   ├── src/
│   │   ├── controllers/      # Request handlers
│   │   ├── services/         # Business logic
│   │   ├── models/           # Database models
│   │   ├── routes/           # API routes
│   │   ├── middleware/       # Express middleware
│   │   ├── utils/            # Utilities
│   │   ├── config/           # Configuration
│   │   ├── app.ts
│   │   └── server.ts
│   ├── tests/
│   ├── prisma/
│   │   └── schema.prisma
│   ├── package.json
│   ├── tsconfig.json
│   └── jest.config.js
│
├── .github/
│   └── workflows/
│       ├── ci.yml            # Continuous Integration
│       └── deploy.yml        # Deployment
│
├── docker-compose.yml         # Development environment
├── Dockerfile                 # Production container
├── .env.example              # Environment template
├── .gitignore
├── README.md
└── package.json              # Root workspace
```

---

## Example: Task Management App

**Frontend (client/src/pages/Dashboard.tsx):**
```tsx
import { useState, useEffect } from 'react'
import { TaskList } from '../components/TaskList'
import { CreateTaskForm } from '../components/CreateTaskForm'
import { useAuth } from '../context/AuthContext'
import { taskService } from '../services/api'

export function Dashboard() {
  const { user } = useAuth()
  const [tasks, setTasks] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    loadTasks()
  }, [])

  async function loadTasks() {
    try {
      const data = await taskService.getAll()
      setTasks(data)
    } catch (error) {
      console.error('Failed to load tasks:', error)
    } finally {
      setLoading(false)
    }
  }

  async function handleCreateTask(task: CreateTaskInput) {
    const newTask = await taskService.create(task)
    setTasks([newTask, ...tasks])
  }

  async function handleToggleTask(id: string) {
    const updated = await taskService.toggle(id)
    setTasks(tasks.map(t => t.id === id ? updated : t))
  }

  if (loading) return <div>Loading...</div>

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-6">
        Welcome, {user?.name}
      </h1>

      <CreateTaskForm onSubmit={handleCreateTask} />

      <TaskList
        tasks={tasks}
        onToggle={handleToggleTask}
      />
    </div>
  )
}
```

**Backend (server/src/controllers/task.controller.ts):**
```typescript
import { Request, Response } from 'express'
import { TaskService } from '../services/task.service'

const taskService = new TaskService()

export class TaskController {
  async getAll(req: Request, res: Response) {
    const tasks = await taskService.findAll(req.user!.userId)
    res.json({ data: tasks })
  }

  async create(req: Request, res: Response) {
    const task = await taskService.create(req.user!.userId, req.body)
    res.status(201).json({ data: task })
  }

  async toggle(req: Request, res: Response) {
    const task = await taskService.toggle(req.params.id, req.user!.userId)
    res.json({ data: task })
  }

  async delete(req: Request, res: Response) {
    await taskService.delete(req.params.id, req.user!.userId)
    res.status(204).send()
  }
}
```

---

## Quick Start

**1. Install dependencies:**
```bash
# Install all dependencies (client + server)
npm install

# Or individually
cd client && npm install
cd server && npm install
```

**2. Setup environment:**
```bash
cp .env.example .env
# Edit .env with your configuration
```

**3. Setup database:**
```bash
cd server
npx prisma migrate dev
npx prisma generate
```

**4. Start development:**
```bash
# Start all services (client, server, database)
docker-compose up

# Or start individually
npm run dev:client   # Frontend on http://localhost:5173
npm run dev:server   # Backend on http://localhost:3000
```

**5. Run tests:**
```bash
npm run test         # All tests
npm run test:client  # Frontend tests
npm run test:server  # Backend tests
```

---

## Stack Options

**Frontend:**
- React + TypeScript + Vite (default)
- Next.js 14 (App Router)
- Vue 3 + TypeScript

**Backend:**
- Express + TypeScript (default)
- FastAPI + Python
- NestJS

**Database:**
- PostgreSQL + Prisma (default)
- MongoDB + Mongoose
- MySQL + TypeORM

**Styling:**
- Tailwind CSS (default)
- CSS Modules
- Styled Components

---

## Included Features

**Authentication:**
- JWT authentication
- OAuth (Google, GitHub)
- Email verification
- Password reset

**Testing:**
- Frontend: Jest + React Testing Library + Cypress
- Backend: Jest + Supertest
- E2E: Playwright

**CI/CD:**
- GitHub Actions workflows
- Automated testing
- Docker build and push
- Deployment to cloud platforms

**Development:**
- Hot reload (frontend + backend)
- Docker development environment
- Database migrations
- Seed data

**Production:**
- Optimized Docker images
- Health checks
- Logging and monitoring
- Environment-based config

---

## Customization

**Add Features:**
```bash
# Add payment processing
/ps --add-feature payments --provider stripe

# Add file uploads
/ps --add-feature uploads --storage s3

# Add email service
/ps --add-feature email --provider sendgrid

# Add admin dashboard
/ps --add-feature admin
```

**Change Stack:**
```bash
# Use Next.js instead of React
/ps --frontend nextjs

# Use FastAPI instead of Express
/ps --backend fastapi

# Use MongoDB instead of PostgreSQL
/ps --database mongodb
```

---

## Deployment

**Vercel (Frontend):**
```bash
cd client
vercel
```

**Railway (Backend):**
```bash
cd server
railway up
```

**Docker (Full Stack):**
```bash
docker-compose -f docker-compose.prod.yml up -d
```

---

## Related Commands

- `/express-api-scaffold` - Generate Express API
- `/fastapi-scaffold` - Generate FastAPI
- `/auth-setup` - Authentication boilerplate
- `/env-config-setup` - Environment configuration

---

**Start building immediately. Ship faster. Scale effortlessly.**