Skip to content

CodeSlick - Production Deployment Guide

🚀 Quick Start (Vercel)

Prerequisites

  • GitHub account with this repository
  • Vercel account (free tier works perfectly)
  • Git repository pushed to GitHub

Step 1: Deploy to Vercel

  1. Go to Vercel Dashboard
  2. Visit https://vercel.com/new

  3. Sign in with your GitHub account

  4. Import Repository

  5. Click "Add New Project"
  6. Select this repository: codeslick2

  7. Click "Import"

  8. Configure Project

  9. Framework Preset: Next.js (auto-detected)
  10. Root Directory: ./ (leave default)
  11. Build Command: npm run build (auto-detected)

  12. Output Directory: .next (auto-detected)

  13. Environment Variables (Optional)

For Static Analysis Only (Recommended for MVP): - No environment variables needed - App works perfectly without AI features

For Advanced AI Analysis (Optional): 

ENABLE_ADVANCED_ANALYSIS=true
QWEN_API_KEY=your_together_ai_key
QWEN_API_URL=https://api.together.xyz/v1
QWEN_MODEL=Qwen/Qwen2.5-Coder-32B-Instruct

  1. Deploy
  2. Click "Deploy"
  3. Wait 2-3 minutes for build to complete
  4. Your app will be live at https://your-project.vercel.app

Step 2: Verify Deployment

  1. Open the deployed URL
  2. Test language switching (PT/EN toggle in header)
  3. Upload a code file or paste code
  4. Confirm language detection
  5. Run analysis
  6. Verify results display correctly

Step 3: Custom Domain (Optional)

  1. Go to Project Settings → Domains
  2. Add your custom domain
  3. Configure DNS records as instructed
  4. Wait for SSL certificate provisioning (automatic)

🔧 Technical Details

Build Configuration

  • Framework: Next.js 15.5.4 with Turbopack
  • Node Version: 18.x or higher
  • Build Time: ~1.5 seconds (Turbopack optimized)
  • Bundle Size: 137 kB (first load JS)

Performance Characteristics

  • Static Pages: Pre-rendered at build time
  • API Routes: Serverless functions (on-demand)
  • Cache Strategy: 5-minute in-memory cache for analysis results
  • Supported Regions: iad1 (US East - optimal latency)

Security Headers (Configured)

X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
Referrer-Policy: strict-origin-when-cross-origin

📊 Monitoring & Analytics

Recommended Additions (Post-MVP)

  1. Vercel Analytics (Built-in, free tier)
  2. Enable in Project Settings → Analytics

  3. Tracks page views, performance metrics

  4. Sentry (Error Tracking) 

    npm install @sentry/nextjs
npx @sentry/wizard@latest -i nextjs

  5. Add SENTRY_DSN to environment variables

  6. Vercel Speed Insights (Free)

  7. Enable in Project Settings → Speed Insights
  8. Real User Monitoring (RUM)

🗄️ Database Setup (Future Phase)

For User Features (Authentication, Saved Analyses)

Recommended: Neon.tech (Serverless PostgreSQL)

  1. Create account at https://neon.tech
  2. Create new project
  3. Copy connection string
  4. Add to Vercel environment variables: 
    DATABASE_URL=postgresql://user:pass@host/db

Schema Planning (Future)

-- Users table
CREATE TABLE users (
  id UUID PRIMARY KEY,
  email VARCHAR(255) UNIQUE,
  created_at TIMESTAMP DEFAULT NOW()
);

-- Analysis history
CREATE TABLE analyses (
  id UUID PRIMARY KEY,
  user_id UUID REFERENCES users(id),
  language VARCHAR(50),
  code_hash VARCHAR(64),
  result JSONB,
  created_at TIMESTAMP DEFAULT NOW()
);

🚨 Troubleshooting

Build Fails

Check: 1. Node version (must be 18.x or higher) 2. All dependencies installed (npm install) 3. TypeScript errors fixed (npm run build locally first)

API Routes Not Working

Check: 1. Vercel function logs (Dashboard → Functions) 2. Environment variables correctly set 3. API route file structure: src/app/api/*/route.ts

Language Switching Not Persisting

Check: 1. Browser localStorage enabled 2. No ad blockers interfering with localStorage 3. HTTPS enabled (required for secure storage)

📝 Environment Variables Reference

Variable Required Default Description
ENABLE_ADVANCED_ANALYSIS No false Enable AI analysis features
QWEN_API_KEY No* - Together.ai API key for Qwen
QWEN_API_URL No* - Qwen API endpoint
QWEN_MODEL No* - Model identifier
HF_API_KEY No* - Alternative: Hugging Face key

*Required only if ENABLE_ADVANCED_ANALYSIS=true

🎯 Post-Deployment Checklist

  • Deployment successful
  • Custom domain configured (if applicable)
  • Language switching works (PT ↔ EN)
  • File upload works
  • Code analysis completes successfully
  • Error handling displays properly
  • Mobile responsive design verified
  • Analytics enabled (Vercel Analytics)
  • Error tracking configured (Sentry - optional)
  • Performance monitoring active (Speed Insights)

📞 Support

Issues? - Check Vercel build logs - Review browser console for errors - Test locally first: npm run build && npm start

Repository: https://github.com/your-username/codeslick2 Framework Docs: https://nextjs.org/docs Deployment Platform: https://vercel.com/docs