deckhearth/DEPLOYMENT.md

5.7 KiB

🚀 TCG Vault Deployment Guide

🏆 OPTION 1: Vercel Pro + Railway - BEST CHOICE

Perfect for You (Already Have Vercel Pro!):

  • Frontend → Your existing Vercel Pro account ($20/month already paying)
  • Backend → Railway cloud service (free tier)
  • Total additional cost: $0/month 🎉
  • Enterprise-grade performance that crushes shared hosting

🔥 Why Vercel Pro Is Superior:

  • 10M edge requests/month included (10x more than Hobby)
  • 1TB data transfer/month (vs 100GB DreamHost shared)
  • Global CDN with 40+ locations (instant worldwide loading)
  • 4-CPU build machines (2x faster builds than Hobby)
  • Advanced WAF protection (enterprise security)
  • Observability & monitoring (performance insights)
  • Zero-downtime deployments (professional reliability)

🚀 Step 1: Deploy Backend to Railway (5 minutes)

1. Create Railway Account

2. Push Backend to GitHub

# In your tcg-vault directory
cd backend
git init
git add .
git commit -m "TCG Vault backend for deployment"
git branch -M main
# Create a new GitHub repo and push
git remote add origin YOUR_GITHUB_REPO_URL
git push -u origin main

3. Deploy to Railway

  1. In Railway dashboard: "New Project"
  2. "Deploy from GitHub repo"
  3. Select your backend repository
  4. Railway auto-detects Python and uses our railway.toml config
  5. Deployment starts automatically!

4. Set Environment Variables (Important!)

In Railway dashboard, add environment variable:

ALLOWED_ORIGINS=https://your-vercel-domain.vercel.app

5. Get Your API URL

  • Copy your Railway app URL (e.g., https://tcg-vault-backend-production-xyz.up.railway.app)

🌟 Step 2: Deploy Frontend to Vercel Pro (3 minutes)

1. Connect GitHub to Vercel

# In your tcg-vault directory  
cd frontend
git init
git add .
git commit -m "TCG Vault frontend for Vercel"
git branch -M main
# Create GitHub repo for frontend
git remote add origin YOUR_FRONTEND_GITHUB_REPO_URL
git push -u origin main

2. Deploy to Vercel

  1. Go to vercel.com/dashboard
  2. "Import Project" → Choose your frontend GitHub repo
  3. Framework: React (auto-detected)
  4. Build Settings: Use defaults
  5. Environment Variables → Add:
    REACT_APP_API_URL=https://your-railway-backend-url.up.railway.app/api/v1
    
  6. Deploy!

3. Custom Domain (Optional)

  • Use your existing domain or get a new one
  • Vercel Pro includes SSL certificates automatically

🎯 Alternative Options (If you want to compare)

Option 2: DreamHost (Frontend) + Railway (Backend)

  • Cost: $0/month (uses existing DreamHost)
  • Performance: Good, but not as fast as Vercel Pro
  • Setup: Manual file uploads vs automatic Git deployments

Option 3: DreamHost VPS ($12/month)

  • Full Python support - Deploy everything together
  • More expensive than using your existing Vercel Pro

Option 4: All Railway

  • Frontend + Backend both on Railway
  • Cost: ~$5-10/month for frontend hosting

📋 Quick Deployment Checklist

Backend (Railway):

  • Push backend code to GitHub
  • Connect Railway to repository
  • Set ALLOWED_ORIGINS environment variable
  • Verify deployment success
  • Copy API URL

Frontend (Vercel Pro):

  • Push frontend code to GitHub
  • Import project in Vercel dashboard
  • Set REACT_APP_API_URL environment variable
  • Deploy and verify
  • Optional: Set up custom domain

🛠️ Troubleshooting

Common Issues:

1. CORS Errors

  • Ensure ALLOWED_ORIGINS in Railway includes your Vercel domain

2. API Not Found

  • Double-check REACT_APP_API_URL in Vercel environment variables
  • Ensure Railway backend is running (check Railway logs)

3. Build Failures

  • Check Vercel build logs in dashboard
  • Verify all dependencies are in package.json

4. OCR Not Working

  • OCR runs client-side with Vercel's edge computing - should work great!
  • Check browser console for any errors

🎯 Expected Results with Vercel Pro

After deployment, you'll have enterprise-grade hosting:

  • Blazing fast worldwide - 40+ edge locations
  • 📱 Perfect mobile performance - OCR scanning works flawlessly
  • 🛡️ Advanced security - WAF protection included
  • 📊 Performance monitoring - Built-in observability tools
  • 🔄 Automatic deployments - Push to Git, instantly live
  • All visual effects - Enhanced with edge optimization
  • 🌍 Global scalability - Handles traffic spikes automatically

💡 Pro Tips for Vercel Pro Users

Performance Optimization:

  • Your 1TB transfer limit easily handles high-traffic
  • Cold start prevention keeps your app instantly responsive
  • Advanced caching speeds up repeat visits

Development Workflow:

  • Preview deployments for every Git branch
  • Automatic PR previews for testing features
  • Instant rollbacks if anything goes wrong

Monitoring:

  • Use Observability tools to track performance
  • Web Analytics to see user behavior
  • Speed Insights to optimize further

🎉 Your TCG Vault Will Be Professional-Grade!

With Vercel Pro + Railway, you get:

  • Netflix-level performance for your card scanner
  • $0 additional cost (using existing Vercel Pro)
  • Enterprise security and reliability
  • Automatic scaling to handle any traffic
  • Professional deployment pipeline

Ready to deploy to your Vercel Pro account? This will be significantly better than any shared hosting option! 🚀