# 🔧 Quick Fix Guide - Environment Variable Error

## ✅ Issue: FIXED

**Error**: `TypeError: Cannot read properties of undefined (reading 'VITE_API_URL')`

**Status**: ✅ Resolved

## What Was The Problem?

The application was trying to read the `VITE_API_URL` environment variable, but:
1. No `.env` file existed in the frontend root directory
2. The API URL in examples was pointing to old Supabase functions (not Node.js backend)
3. The code didn't safely handle missing environment variables

## What Was Fixed?

### ✅ 1. Created Frontend Environment File
- Created `/.env` with proper configuration
- Points to Node.js backend: `http://localhost:5000/api`
- Includes all necessary frontend variables

### ✅ 2. Created Backend Environment Files
- Created `/backend/.env` with development defaults
- Created `/backend/.env.example` as a template
- Includes database, JWT, Paystack, Prembly configs

### ✅ 3. Updated API Client
- Made `utils/api.ts` safely handle missing environment variables
- Added fallback to `http://localhost:5000/api`
- Prevents undefined errors

### ✅ 4. Updated Examples
- Fixed `/env.example` to point to Node.js backend (not Supabase)
- Added helpful comments

### ✅ 5. Created Helper Scripts
- `/start-dev.sh` - One command to start both servers
- `/FIX_APPLIED.md` - Detailed fix documentation

## 🚀 Quick Start (3 Steps)

### Step 1: Install Dependencies (if needed)
```bash
# Frontend
npm install

# Backend
cd backend
npm install
cd ..
```

### Step 2: Setup Database (if not done)
```bash
# Create database
createdb enamel_wallet

# Load schema
psql -d enamel_wallet -f DATABASE_SCHEMA.sql
# OR
psql -d enamel_wallet -f backend/src/database/schema.sql
```

### Step 3: Start Development Servers

**Option A - Use Helper Script** (Recommended):
```bash
chmod +x start-dev.sh
./start-dev.sh
```

**Option B - Manual Start**:
```bash
# Terminal 1 - Backend
cd backend
npm run dev

# Terminal 2 - Frontend (new terminal)
npm run dev
```

### Step 4: Open App
Navigate to: **http://localhost:5173**

## 🔍 Verify Fix

1. **Check No Errors**: Open browser console - no `VITE_API_URL` errors ✅
2. **Check API Calls**: Open Network tab - API calls go to `localhost:5000/api` ✅
3. **Test Signup/Login**: Try creating account or logging in ✅

## ⚙️ Configuration Files Created

| File | Location | Purpose |
|------|----------|---------|
| `.env` | `/` | Frontend environment config |
| `.env.example` | `/` | Frontend template (updated) |
| `.env` | `/backend/` | Backend environment config |
| `.env.example` | `/backend/` | Backend template |

## 🔑 Next: Add Your API Keys

Update `/backend/.env` with real API keys:

```bash
# 1. Paystack (Required for payments)
PAYSTACK_SECRET_KEY=sk_test_xxxxx
# Get from: https://dashboard.paystack.com

# 2. Prembly (Required for KYC)
PREMBLY_API_KEY=your_key
PREMBLY_APP_ID=your_app_id
# Get from: https://prembly.com/developers

# 3. Database (Update with your PostgreSQL credentials)
DB_USER=your_postgres_username
DB_PASSWORD=your_postgres_password
```

## 🐛 Troubleshooting

### "Backend won't start"
```bash
# Check PostgreSQL is running
pg_isready

# Check port 5000 is free
lsof -i :5000

# View backend logs
cd backend
npm run dev
```

### "Frontend can't connect"
```bash
# Verify backend is running
curl http://localhost:5000/api/system/health

# Check .env file exists
cat .env | grep VITE_API_URL
# Should show: VITE_API_URL=http://localhost:5000/api
```

### "Database connection error"
```bash
# Check database exists
psql -l | grep enamel_wallet

# Test connection
psql -d enamel_wallet -c "SELECT 1;"

# Update credentials in /backend/.env
DB_USER=your_username
DB_PASSWORD=your_password
```

### "Still getting VITE_API_URL error"
```bash
# 1. Restart dev server (Ctrl+C then restart)
# 2. Clear Vite cache
rm -rf node_modules/.vite

# 3. Verify .env exists in root
ls -la .env

# 4. Check .env content
cat .env | head -20
```

## 📚 Documentation

- **Full Details**: See `/FIX_APPLIED.md`
- **Backend API**: See `/backend/README.md`
- **Migration Guide**: See `/BACKEND_MIGRATION_GUIDE.md`
- **Deployment**: See `/DEPLOYMENT_GUIDE.md`

## 🎯 Summary

| Before | After |
|--------|-------|
| ❌ No .env files | ✅ .env files created |
| ❌ Wrong API URL (Supabase) | ✅ Correct API URL (Node.js) |
| ❌ Unsafe env access | ✅ Safe env access with fallback |
| ❌ Environment error | ✅ Error fixed |

**Your app should now work! 🎉**

---

**Need Help?** Check:
1. Browser console for errors
2. Backend logs: `cd backend && npm run dev`
3. Frontend logs: `npm run dev`
4. Environment files: `.env` and `backend/.env`