Deployment Setup Guide¶

Step-by-step instructions for deploying MessWala to production.

📋 Prerequisites¶

Before starting, ensure you have:

• ✅ GitHub account with repository access
• ✅ MongoDB Atlas account (free tier available)
• ✅ Render account (for backend)
• ✅ Vercel account (for frontend)
• ✅ Google OAuth credentials
• ✅ reCAPTCHA v3 keys

Phase 1: Database Setup (MongoDB Atlas)¶

Step 1: Create MongoDB Atlas Account¶

1. Go to mongodb.com/atlas
2. Click "Try Free"
3. Create account with email/GitHub
4. Verify email

Step 2: Create Cluster¶

1. Click "Create a Deployment"
2. Choose "Free" tier (M0 Sandbox)
3. Select cloud provider (AWS/GCP/Azure)
4. Select region closest to you
5. Click "Create Deployment"
6. Wait 5-10 minutes for cluster creation

Step 3: Create Database User¶

1. Go to "Database Access"
2. Click "Add New Database User"
3. Choose "Autogenerated Secure Password"
4. Copy the username (usually dbuser)
5. Copy the password securely
6. Role: "Read and write to any database"
7. Click "Add User"

Step 4: Configure Network Access¶

1. Go to "Network Access"
2. Click "Add IP Address"
3. Select "Allow access from anywhere"
4. CIDR: 0.0.0.0/0
5. Click "Confirm"

⚠️ For production: Whitelist specific IPs instead

Step 5: Get Connection String¶

1. Click "Databases" → "Connect"
2. Choose "Drivers" (not Compass)
3. Select "Node.js" and version "4.x or later"
4. Copy connection string from MongoDB Atlas Example format (with placeholders):

   mongodb+srv://<USERNAME>:<PASSWORD>@<CLUSTER>.mongodb.net/<DATABASE>?retryWrites=true&w=majority
   

5. Store in environment-only (.env file or platform secrets):
6. DO NOT paste actual credentials in code
7. Use: MONGO_URI=<your-actual-connection-string>
8. CRITICAL: Never commit any credentials or connection strings to git

Phase 2: Backend Deployment (Render)¶

Step 1: Prepare Backend¶

1. Ensure backend/ folder has:
2. package.json
3. server.js

4. src/ directory with code

5. Create .gitignore (if not exists):

   node_modules/
   .env
   *.log
   .DS_Store
   

6. Commit to GitHub:

   git add backend/
   git commit -m "Backend ready for deployment"
   git push origin main
   

Step 2: Create Render Service¶

1. Go to render.com
2. Click "New" → "Web Service"
3. Connect your GitHub account
4. Select MessWala repository
5. Fill in:
6. Name: messwala
7. Root Directory: backend
8. Runtime: Node
9. Build Command: npm install
10. Start Command: node server.js
11. Instance Type: Free

Step 3: Set Environment Variables¶

1. Click "Environment"
2. Add each variable:

1. Click "Save Changes"

Step 4: Deploy¶

1. Render automatically deploys
2. Wait for build to complete (~2-3 min)
3. You'll get a URL like: https://messwala-xxxx.onrender.com
4. Note this URL for frontend setup

Step 5: Verify Deployment¶

1. Open your Render URL in browser
2. Navigate to /api/health
3. You should see:

   {
     "status": "ok",
     "dbState": 1
   }
   

Phase 3: Frontend Deployment (Vercel)¶

Step 1: Prepare Frontend¶

1. Ensure frontend/ folder has:
2. package.json
3. vite.config.js

4. src/ directory

5. Commit to GitHub:

   git add frontend/
   git commit -m "Frontend ready for deployment"
   git push origin main
   

Step 2: Create Vercel Project¶

1. Go to vercel.com
2. Click "Add New" → "Project"
3. Import your MessWala repository
4. Configure:
5. Framework Preset: Vite
6. Root Directory: frontend

Step 3: Set Environment Variables¶

1. In Vercel project settings
2. Go to "Environment Variables"
3. Add:

1. Save

Step 4: Deploy¶

1. Click "Deploy"
2. Wait for build (~2-3 min)
3. You'll get a URL: https://mess-walah.vercel.app

Step 5: Verify Deployment¶

1. Open the Vercel URL
2. Try to login
3. Check browser console for errors

Phase 4: Linking Backend & Frontend¶

Update CORS on Backend¶

1. Go to Render → Environment
2. Find ALLOWED_ORIGINS
3. Update to only include your production URLs:

   https://your-frontend-domain.vercel.app
   

4. Remove any localhost URLs (they should only be in development mode)
5. Redeploy Render service

Phase 5: Admin Setup¶

Step 1: Create Admin Account¶

1. Navigate to your Vercel URL
2. Click "Sign Up"
3. Complete the registration form:
4. The first user to sign up automatically becomes the admin
5. Use a secure password (minimum 12 characters recommended)
6. Save credentials in a secure location (password manager)

Step 2: Configure Mess¶

After login, you'll see setup wizard:

1. Mess Information
2. Name (required)
3. Description (optional)

4. Email & phone

5. Expense Categories

6. Select presets: Vegetables, Rice, Gas, Salary, Dairy, Spices

7. Add custom: WiFi, Maintenance, etc.

8. Meal Times

9. Breakfast (7:30 - 9:00 AM)
10. Lunch (12:30 - 2:00 PM)

11. Dinner (7:30 - 9:00 PM)

12. Click "Complete Setup"

Step 3: Go Live¶

• System is now ready
• Students can register
• Managers can start recording expenses
• Everything is configured!

🔧 Troubleshooting Deployment¶

Backend Won't Start¶

Check Render logs: 1. Go to Render dashboard 2. Click on messwala service 3. Go to "Logs" 4. Look for error messages

Common issues: - MONGO_URI not set or incorrect - JWT_SECRET missing - Port already in use (shouldn't happen on Render)

Frontend Won't Load¶

Check Vercel logs: 1. Go to Vercel dashboard 2. Click project 3. Go to "Deployments" 4. Click latest deployment 5. Check build logs

Common issues: - VITE_API_URL incorrect - Missing environment variables - Build errors in source code

CORS Error on Frontend¶

Fix: 1. Get your Vercel URL 2. Add to Render ALLOWED_ORIGINS 3. Restart Render service 4. Wait 2-3 minutes 5. Try again

Database Connection Failed¶

Check: 1. MongoDB Atlas network access 2. Connection string format 3. Database user password 4. Username/password don't have special characters that need escaping

Test Connection (Example - use YOUR actual credentials):

# Use your env var locally instead of embedding credentials in commands:
mongosh "$env:MONGO_URI"

⚠️ SECURITY NOTE: Never put real credentials in example code or documentation. Always use environment variables (.env files).

🚀 Post-Deployment Checklist¶

• [ ] Health endpoint responds: /api/health
• [ ] Frontend loads without CORS errors
• [ ] Can login (email/password)
• [ ] Can login (Google OAuth)
• [ ] Admin setup wizard works
• [ ] Can create expense
• [ ] Can mark attendance
• [ ] Can view analytics
• [ ] Mobile responsive (check on phone)
• [ ] Performance acceptable (<3s load)

🔐 Security Checklist¶

• [ ] MongoDB whitelist not 0.0.0.0/0 (production)
• [ ] JWT_SECRET is random & strong
• [ ] ADMIN password is strong
• [ ] Google OAuth credentials are right
• [ ] reCAPTCHA keys configured
• [ ] HTTPS enforced (should be default)
• [ ] No API keys in code
• [ ] Sentry/monitoring enabled (optional

)

📊 Monitoring¶

Health Check Endpoint¶

Regularly check your backend health:

curl https://messwala-6jvj.onrender.com/api/health

Should return:

{
  "status": "ok",
  "dbState": 1,
  "timestamp": "2024-01-15T10:00:00Z"
}

Performance Monitoring¶

Use built-in tools: - Vercel: Dashboard → Analytics - Render: Dashboard → Metrics - MongoDB: Atlas → Performance

🔄 Updating Deployment¶

Deploy Code Changes¶

# Make changes locally
# Commit and push
git add .
git commit -m "Fix: issue description"
git push origin main

# Automatic deployment:
# Vercel & Render redeploy automatically

Update Environment Variables¶

1. Change in Render or Vercel
2. Service redeploys automatically
3. Or manually redeploy by clicking button

📝 Important URLs¶

Live Application: - Frontend: https://mess-walah.vercel.app - Backend: https://messwala-6jvj.onrender.com - API Root: https://messwala-6jvj.onrender.com/api

Management Dashboards: - MongoDB Atlas - Render Dashboard - Vercel Dashboard - GitHub Repository

Last Updated: March 17, 2026
Version: 2.0