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
…

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()
…

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)
…

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