Initial commit
This commit is contained in:
Zhongwei Li
354
commands/project-scaffold.md
Normal file
354
commands/project-scaffold.md
Normal file
@@ -0,0 +1,354 @@
|
||||
---
|
||||
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.**
|
||||
Reference in New Issue
Block a user