Project Scaffold

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

# 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):

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 />

      <TaskList
        tasks={tasks}
       
      />
    </div>
  )
}

Backend (server/src/controllers/task.controller.ts):

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:

# Install all dependencies (client + server)
npm install

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

2. Setup environment:

cp .env.example .env
# Edit .env with your configuration

3. Setup database:

cd server
npx prisma migrate dev
npx prisma generate

4. Start development:

# 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:

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:

# 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:

# 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):

cd client
vercel

Railway (Backend):

cd server
railway up

Docker (Full Stack):

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.