Wan2.1/wan-pwa/SETUP.md
Claude e8fda73741
feat: Add complete Wan2.1 PWA - AI Video Generation Platform
This commit adds a production-ready Progressive Web App for AI-powered video
generation using Wan2.1 models.

Features:
- Next.js 15 frontend with App Router and PWA support
- FastAPI backend with Replicate integration
- 50+ prompt templates across 7 categories
- Supabase authentication and database
- Credit system with usage tracking
- Text-to-Video and Image-to-Video generation
- Complete documentation (setup, deployment, contributing)

Project Structure:
- apps/web: Next.js frontend with shadcn/ui components
- apps/api: FastAPI backend with GPU processing via Replicate
- packages/db: Database schema and migrations for Supabase

Tech Stack:
- Frontend: Next.js 15, shadcn/ui, Tailwind, Zustand, React Hook Form, Zod
- Backend: FastAPI, Replicate, Supabase
- Database: Supabase (Postgres) with RLS
- Infrastructure: Turborepo monorepo, Vercel/Modal deployment

Documentation:
- README.md: Project overview and features
- SETUP.md: Complete setup guide (5-minute quickstart)
- DEPLOYMENT.md: Production deployment instructions
- CONTRIBUTING.md: Contribution guidelines
- PROJECT_SUMMARY.md: Comprehensive project documentation

Ready for development and deployment.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-24 14:18:18 +00:00

3.8 KiB

Setup Guide

Quick Start (5 Minutes)

1. Prerequisites

  • Node.js 18+ installed
  • Python 3.10+ installed
  • Supabase account (free tier)
  • Replicate account ($10 free credit)

2. Clone and Install

git clone <your-repo-url>
cd wan-pwa
npm install

3. Get Credentials

Supabase Setup (3 minutes)

  1. Go to https://supabase.com
  2. Create new project: "wan-pwa"
  3. Wait ~2 minutes for provisioning
  4. Go to Settings → API
  5. Copy these 4 values:
    • Project URL → NEXT_PUBLIC_SUPABASE_URL
    • anon public → NEXT_PUBLIC_SUPABASE_ANON_KEY
    • service_role → SUPABASE_SERVICE_ROLE_KEY
    • JWT Secret → SUPABASE_JWT_SECRET

Replicate Setup (2 minutes)

  1. Go to https://replicate.com
  2. Sign up with GitHub
  3. Go to https://replicate.com/account/api-tokens
  4. Create token → Copy → REPLICATE_API_TOKEN

4. Configure Environment

Frontend (.env.local)

cd apps/web
cp .env.example .env.local

Edit .env.local:

NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGci...
SUPABASE_SERVICE_ROLE_KEY=eyJhbGci...
NEXT_PUBLIC_API_URL=http://localhost:8000
NEXT_PUBLIC_APP_URL=http://localhost:3000

Backend (.env)

cd ../api
cp .env.example .env

Edit .env:

SUPABASE_URL=https://xxxxx.supabase.co
SUPABASE_SERVICE_ROLE_KEY=eyJhbGci...
REPLICATE_API_TOKEN=r8_xxxxx
ALLOWED_ORIGINS=http://localhost:3000

5. Database Setup

# From project root
cd packages/db

# Run migration in Supabase dashboard:
# 1. Go to SQL Editor in Supabase
# 2. Create new query
# 3. Copy contents of migrations/001_initial_schema.sql
# 4. Run query

6. Start Development

# Terminal 1: Frontend
cd apps/web
npm run dev
# → http://localhost:3000

# Terminal 2: Backend
cd apps/api
pip install -r requirements.txt
uvicorn main:app --reload
# → http://localhost:8000

7. Test the App

  1. Open http://localhost:3000
  2. Click "Get Started"
  3. Sign up with email
  4. Browse prompt templates
  5. Generate your first video!

Troubleshooting

"Module not found" errors

# Clear caches and reinstall
rm -rf node_modules package-lock.json
npm install

Supabase connection errors

Check:

  • URLs don't have trailing slashes
  • Keys are complete (very long strings)
  • Project is fully provisioned (not still "Setting up")

API not starting

# Check Python version
python --version  # Should be 3.10+

# Try with full path
python3 -m uvicorn main:app --reload

Database migration fails

  • Make sure you're using the SQL Editor in Supabase dashboard
  • Check that UUID extension is enabled
  • Verify you're in the correct project

Next Steps

  • Customize prompt templates in apps/web/src/lib/prompts/templates.ts
  • Add your logo in apps/web/public/icons/
  • Setup GitHub Actions for CI/CD
  • Deploy to production (see DEPLOYMENT.md)

Project Structure

wan-pwa/
├── apps/
│   ├── web/              # Next.js frontend
│   │   ├── src/
│   │   │   ├── app/      # Pages & layouts
│   │   │   ├── components/ # React components
│   │   │   └── lib/      # Utilities & hooks
│   │   └── public/       # Static assets
│   │
│   └── api/              # FastAPI backend
│       ├── routes/       # API endpoints
│       ├── core/         # Business logic
│       └── models/       # Pydantic models
│
├── packages/
│   └── db/               # Database schema
│       └── migrations/   # SQL migrations
│
└── turbo.json            # Monorepo config

Need Help?