Spaces:
Sleeping
Sleeping
| # 🚀 Phase 4.2 - Production Deployment Checklist | |
| **Status**: Ready for Production | **Estimated Time**: 5 minutes | **Cost**: $0 (NO CREDIT CARD NEEDED) | |
| --- | |
| ## ✅ What's Already Done | |
| - [x] Backend deployed to HuggingFace Spaces (`https://01ammu-data-cleaning-openenv.hf.space`) | |
| - [x] Database: SQLite (included with HF Spaces) | |
| - [x] API endpoints working | |
| - [ ] **Frontend deployed** ← You are here | |
| --- | |
| ## 🎯 Your Task: Deploy Frontend to Vercel (5 minutes) | |
| ### Step 1: Go to Vercel | |
| 1. [ ] Open https://vercel.com | |
| 2. [ ] Click **Sign Up** | |
| 3. [ ] Choose **GitHub** (simplest) | |
| 4. [ ] Authorize Vercel to access your repos | |
| ### Step 2: Import Your Project | |
| 1. [ ] Click **+ New Project** | |
| 2. [ ] Search for: `data-cleaning-openenv` | |
| 3. [ ] Click **Import** | |
| ### Step 3: Configure Project | |
| 1. [ ] **Framework**: Vite | |
| 2. [ ] **Root Directory**: `frontend` | |
| 3. [ ] **Build Command**: `npm run build` (auto-filled) | |
| 4. [ ] **Output Directory**: `dist` (auto-filled) | |
| ### Step 4: Add Environment Variable | |
| 1. [ ] Scroll to **Environment Variables** | |
| 2. [ ] Click **+ Add** | |
| 3. [ ] **Name**: `VITE_API_BASE_URL` | |
| 4. [ ] **Value**: `https://01ammu-data-cleaning-openenv.hf.space/api` | |
| 5. [ ] Click **Add** | |
| ### Step 5: Deploy! | |
| 1. [ ] Click **Deploy** | |
| 2. [ ] Wait 1-2 minutes | |
| 3. [ ] ✅ Done! Vercel shows your live URL | |
| --- | |
| ## ✨ Your Live URLs | |
| Once deployed, you'll have: | |
| | Service | URL | | |
| |---------|-----| | |
| | **Frontend** | `https://data-cleaning-openenv.vercel.app` (or custom domain) | | |
| | **Backend** | `https://01ammu-data-cleaning-openenv.hf.space` | | |
| | **API Docs** | `https://01ammu-data-cleaning-openenv.hf.space/docs` | | |
| --- | |
| ## 🧪 Verify It Works | |
| ### Test in Browser | |
| 1. [ ] Open your Vercel URL | |
| 2. [ ] Upload a CSV file | |
| 3. [ ] Click "Start Cleaning" | |
| 4. [ ] Wait for job to complete | |
| 5. [ ] Download cleaned data | |
| ### Test API | |
| ```bash | |
| # Check backend is alive | |
| curl https://01ammu-data-cleaning-openenv.hf.space/health | |
| # Expected: {"status": "ok"} | |
| ``` | |
| --- | |
| ## ⚠️ Important Notes | |
| ### HF Spaces Sleep Behavior | |
| - **Sleeps after**: 48 hours without access | |
| - **Wake-up time**: ~30 seconds (auto-wakes on first request) | |
| - **Why**: Free tier pauses unused services | |
| - **Solution**: Just refresh the page, it'll wake up | |
| ### No Credit Card Needed | |
| - ✅ HuggingFace Spaces: No credit card | |
| - ✅ Vercel: No credit card | |
| - ✅ SQLite Database: Included (no separate DB) | |
| - ✅ **Total Cost: $0 forever** | |
| --- | |
| ## 📝 Update Your Portfolio | |
| Once live, add to your resume: | |
| ``` | |
| Live Demo: https://data-cleaning-openenv.vercel.app | |
| (Backend: HuggingFace Spaces, Frontend: Vercel) | |
| ``` | |
| --- | |
| ## 🎓 What This Deployment Shows | |
| ✨ **Full-Stack Skills**: | |
| - React + TypeScript frontend (Vercel) | |
| - FastAPI backend (HF Spaces) | |
| - SQLite database | |
| - Production deployment experience | |
| ✨ **Cloud Knowledge**: | |
| - Multiple cloud platforms (Vercel + HF Spaces) | |
| - Environment variable management | |
| - CI/CD (Vercel auto-deploys on git push) | |
| - Free tier optimization (no credit card = resourcefulness) | |
| --- | |
| ## Done! 🚀 | |
| When all checkboxes above are complete: | |
| 1. ✅ Frontend is live on Vercel | |
| 2. ✅ Backend is live on HF Spaces | |
| 3. ✅ File upload → cleaning → download works | |
| 4. ✅ You have a production-grade portfolio project | |
| 5. ✅ Zero cost, zero credit cards, 5 minutes setup | |
| **Next**: Share your live link! This is portfolio gold 💎 | |
| --- | |
| ## Deploying via Docker Compose & GHCR (alternative) | |
| If you prefer running the full stack yourself (self-hosted or cloud VM), this repo includes Dockerfiles and compose manifests. | |
| 1. Build & publish images (CI does this automatically to GHCR): | |
| - ghcr.io/<owner>/data-cleaning-openenv-backend:latest | |
| - ghcr.io/<owner>/data-cleaning-openenv-frontend:latest | |
| 2. Use docker-compose.prod.yml to run services locally or on a host: | |
| - Copy .env.example to .env and set production secrets (DATABASE_URL, POSTGRES_PASSWORD, JWT_SECRET) | |
| - docker compose -f docker-compose.prod.yml pull | |
| - docker compose -f docker-compose.prod.yml up -d | |
| 3. Verify health endpoints: | |
| - curl http://<HOST>:8000/api/health | |
| 4. Notes on secrets & TLS: | |
| - Use environment variables or a secrets manager (Vault, cloud secrets) | |
| - Terminate TLS at a reverse proxy (NGINX, cloud LB) and ensure JWT_SECRET is kept secret | |
| --- | |
| ## Troubleshooting | |
| ### "Vercel deployment failed" | |
| 1. Check GitHub repo is public (Vercel needs access) | |
| 2. Verify `frontend` directory exists | |
| 3. Check `package.json` has correct build script | |
| 4. View Vercel logs for details | |
| ### "Frontend can't reach backend" | |
| 1. Make sure `VITE_API_BASE_URL` is set to: `https://01ammu-data-cleaning-openenv.hf.space/api` | |
| 2. Backend URL must end with `/api` (don't forget!) | |
| 3. Re-deploy frontend: Vercel dashboard → Deployments → Redeploy | |
| ### "Backend is slow / timing out" | |
| HF Spaces might be sleeping. Just refresh the page. It'll wake up in 30 seconds. | |
| --- | |
| ## Cost Breakdown | |
| | Component | Service | Monthly Cost | Credit Card | | |
| |-----------|---------|--------------|------------| | |
| | Frontend | Vercel | $0 | No ✓ | | |
| | Backend | HF Spaces | $0 | No ✓ | | |
| | Database | SQLite | $0 | No ✓ | | |
| | **Total** | | **$0** | **No** ✓ | | |
| Perfect for a student portfolio! 🎓 | |