Full-Stack Developer Cheat Sheet

Full-Stack Developer Cheat Sheet

End-to-end development workflow from database to UI.

Quick Reference

# Start full stack
docker-compose up -d db redis
npm run dev &
cd api && uvicorn main:app --reload

# Check all services
curl localhost:8000/api/health  # API
curl localhost:3000              # Frontend
docker-compose ps                # Infrastructure

Project Setup

Docker Compose Stack

version: '3.8'
services:
  db:
    image: postgres:16
    environment:
      POSTGRES_DB: app
      POSTGRES_USER: user
      POSTGRES_PASSWORD: pass
    ports:
      - "5432:5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data

  redis:
    image: redis:7-alpine
    ports:
      - "6379:6379"

  api:
    build: ./api
    ports:
      - "8000:8000"
    depends_on:
      - db
      - redis
    environment:
      DATABASE_URL: postgresql://user:pass@db:5432/app
      REDIS_URL: redis://redis:6379

  web:
    build: ./web
    ports:
      - "3000:3000"
    depends_on:
      - api

volumes:
  postgres_data:

Development Workflow

Local Development

# Terminal 1: Database
docker-compose up -d db redis

# Terminal 2: API
cd api
source venv/bin/activate
uvicorn main:app --reload

# Terminal 3: Frontend
cd web
npm run dev

# Terminal 4: Workers (if needed)
cd api
celery -A worker worker --loglevel=info

Database Migrations

# Create migration
alembic revision --autogenerate -m "add users table"

# Apply migrations
alembic upgrade head

# Rollback
alembic downgrade -1

API Development

Request/Response Flow

Client Request
     |
     v
API Gateway/Load Balancer
     |
     v
Web Server (Nginx/Gunicorn)
     |
     v
Application (FastAPI/Express)
     |
     v
Database/Cache/External Services

Common Endpoints

# CRUD pattern
GET    /api/users          # List
POST   /api/users          # Create
GET    /api/users/:id      # Read
PUT    /api/users/:id      # Update
DELETE /api/users/:id      # Delete

# Auth
POST   /api/auth/login
POST   /api/auth/register
POST   /api/auth/refresh
POST   /api/auth/logout

Frontend-Backend Integration

API Client

// api/client.ts
const API_URL = import.meta.env.VITE_API_URL;

export async function fetchApi<T>(
  endpoint: string,
  options?: RequestInit
): Promise<T> {
  const response = await fetch(`${API_URL}${endpoint}`, {
    ...options,
    headers: {
      'Content-Type': 'application/json',
      ...options?.headers,
    },
  });

  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }

  return response.json();
}

React Query

// hooks/useUsers.ts
export function useUsers() {
  return useQuery({
    queryKey: ['users'],
    queryFn: () => fetchApi<User[]>('/api/users'),
  });
}

export function useCreateUser() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: (user: CreateUser) =>
      fetchApi('/api/users', {
        method: 'POST',
        body: JSON.stringify(user),
      }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['users'] });
    },
  });
}

Debugging Full Stack

API Issues

# Check API logs
docker-compose logs -f api

# Test endpoint
curl -v http://localhost:8000/api/users

# Check database connection
docker-compose exec api python -c "from database import engine; print(engine.execute('SELECT 1'))"

Frontend Issues

// Network tab in DevTools
// Check request/response

// Console logging
console.log('API response:', data);

// Check CORS
// Response headers should include Access-Control-Allow-Origin

Deployment Checklist

### Pre-deploy
- [ ] All tests passing
- [ ] Build successful
- [ ] Environment variables set
- [ ] Database migrations ready
- [ ] API documentation updated

### Deploy
- [ ] Run database migrations
- [ ] Deploy API
- [ ] Deploy frontend
- [ ] Clear CDN cache
- [ ] Verify health checks

### Post-deploy
- [ ] Smoke test critical paths
- [ ] Monitor error rates
- [ ] Check performance metrics

Common Full-Stack Patterns