| # 🚀 Hugging Face Spaces Deployment Checklist | |
| ## ✅ Pre-Deployment Setup | |
| ### 1. MongoDB Atlas Database | |
| - [ ] Create MongoDB Atlas account | |
| - [ ] Create a new cluster (free tier) | |
| - [ ] Create database user with read/write permissions | |
| - [ ] Get connection string | |
| - [ ] Test connection locally | |
| ### 2. Hugging Face Account | |
| - [ ] Create Hugging Face account | |
| - [ ] Enable Spaces feature | |
| - [ ] Verify account permissions | |
| ## 🏗️ Backend Deployment | |
| ### 1. Create Backend Space | |
| - [ ] Go to https://huggingface.co/spaces | |
| - [ ] Click "Create new Space" | |
| - [ ] Choose "Docker" as SDK | |
| - [ ] Name: `your-username/transcreation-backend` | |
| - [ ] Set to "Public" or "Private" | |
| ### 2. Upload Backend Files | |
| - [ ] Upload all files from `deploy/backend/` | |
| - [ ] Verify Dockerfile is in root of Space | |
| - [ ] Verify package.json is present | |
| ### 3. Configure Environment Variables | |
| - [ ] Go to Settings → Repository secrets | |
| - [ ] Add `MONGODB_URI`: `mongodb+srv://username:password@cluster.mongodb.net/transcreation-sandbox` | |
| - [ ] Add `NODE_ENV`: `production` | |
| - [ ] Add `PORT`: `5000` | |
| ### 4. Deploy Backend | |
| - [ ] Wait for build to complete | |
| - [ ] Check logs for any errors | |
| - [ ] Test health endpoint: `https://your-username-transcreation-backend.hf.space/health` | |
| - [ ] Test API endpoint: `https://your-username-transcreation-backend.hf.space/api/health` | |
| ## 🎨 Frontend Deployment | |
| ### 1. Create Frontend Space | |
| - [ ] Go to https://huggingface.co/spaces | |
| - [ ] Click "Create new Space" | |
| - [ ] Choose "Docker" as SDK | |
| - [ ] Name: `your-username/transcreation-frontend` | |
| - [ ] Set to "Public" or "Private" | |
| ### 2. Upload Frontend Files | |
| - [ ] Upload all files from `deploy/frontend/` | |
| - [ ] Verify Dockerfile is in root of Space | |
| - [ ] Verify nginx.conf is present | |
| ### 3. Configure Environment Variables | |
| - [ ] Go to Settings → Repository secrets | |
| - [ ] Add `REACT_APP_API_URL`: `https://your-username-transcreation-backend.hf.space/api` | |
| ### 4. Deploy Frontend | |
| - [ ] Wait for build to complete | |
| - [ ] Check logs for any errors | |
| - [ ] Test frontend URL: `https://your-username-transcreation-frontend.hf.space` | |
| ## 🧪 Testing | |
| ### 1. Backend Testing | |
| - [ ] Health check: `https://your-backend-url/health` | |
| - [ ] API health: `https://your-backend-url/api/health` | |
| - [ ] Database connection working | |
| - [ ] CORS headers present | |
| ### 2. Frontend Testing | |
| - [ ] Page loads without errors | |
| - [ ] Can navigate between pages | |
| - [ ] API calls work (check browser console) | |
| - [ ] Login functionality works | |
| - [ ] All features accessible | |
| ### 3. Integration Testing | |
| - [ ] Frontend can connect to backend | |
| - [ ] User registration/login works | |
| - [ ] Tutorial tasks load | |
| - [ ] Weekly practice loads | |
| - [ ] Voting system works | |
| - [ ] Admin features work (if admin user) | |
| ## 🔧 Troubleshooting | |
| ### Common Issues | |
| 1. **Backend Build Fails** | |
| - Check Dockerfile syntax | |
| - Verify all dependencies in package.json | |
| - Check environment variables | |
| 2. **Frontend Build Fails** | |
| - Check React build process | |
| - Verify nginx.conf syntax | |
| - Check environment variables | |
| 3. **Database Connection Issues** | |
| - Verify MongoDB Atlas connection string | |
| - Check network access settings | |
| - Verify database user permissions | |
| 4. **CORS Issues** | |
| - Check backend CORS configuration | |
| - Verify frontend API URL | |
| - Check browser console for errors | |
| 5. **Environment Variables Not Working** | |
| - Verify variable names match exactly | |
| - Check for typos in values | |
| - Restart Space after adding variables | |
| ## 📞 Support | |
| If you encounter issues: | |
| 1. Check Hugging Face Spaces logs | |
| 2. Verify all environment variables | |
| 3. Test locally with Docker Compose first | |
| 4. Check MongoDB Atlas connection | |
| 5. Review browser console for frontend errors | |
| ## 🎉 Success Indicators | |
| - [ ] Backend responds to health checks | |
| - [ ] Frontend loads without errors | |
| - [ ] Users can register and login | |
| - [ ] Tutorial tasks and weekly practice load | |
| - [ ] Voting system works | |
| - [ ] Admin features accessible | |
| - [ ] No console errors in browser | |
| - [ ] All API endpoints responding | |
| ## 🔗 Final URLs | |
| - **Backend**: `https://your-username-transcreation-backend.hf.space` | |
| - **Frontend**: `https://your-username-transcreation-frontend.hf.space` | |
| - **API Base**: `https://your-username-transcreation-backend.hf.space/api` | |
| ## 📝 Notes | |
| - Keep MongoDB Atlas connection string secure | |
| - Monitor Hugging Face Spaces usage limits | |
| - Set up monitoring for both Spaces | |
| - Consider setting up custom domain later | |
| - Regular backups of MongoDB data recommended |