# 🚀 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