# ✅ Environment Variable Error - FIXED

## Problem
```
TypeError: Cannot read properties of undefined (reading 'VITE_API_URL')
```

## Solution Applied ✅

Your environment has been configured! Here's what was done:

### 1️⃣ Created Environment Files
- ✅ `/.env` - Frontend configuration
- ✅ `/backend/.env` - Backend configuration
- ✅ `/backend/.env.example` - Backend template
- ✅ Updated `/env.example` - Frontend template

### 2️⃣ Fixed API Client
- ✅ Updated `/utils/api.ts` to safely handle environment variables
- ✅ Added fallback to prevent undefined errors

### 3️⃣ Added Helper Scripts
- ✅ `./start-dev.sh` - Start both servers with one command
- ✅ `./check-env.sh` - Validate your environment setup

### 4️⃣ Created .gitignore
- ✅ `.env` files will not be committed to git (security)

## 🚀 Quick Start

### Step 1: Verify Setup
```bash
chmod +x check-env.sh
./check-env.sh
```

This will check:
- ✓ All required files exist
- ✓ Dependencies are installed
- ✓ Environment variables are configured
- ✓ Database is set up
- ✓ Ports are available

### Step 2: Fix Any Issues
If the check script finds issues:

**Missing dependencies?**
```bash
npm install
cd backend && npm install
```

**Database not set up?**
```bash
createdb enamel_wallet
psql -d enamel_wallet -f DATABASE_SCHEMA.sql
```

**Environment files missing?**
```bash
# Already created for you! But if you deleted them:
cp env.example .env
cp backend/.env.example backend/.env
```

### Step 3: Start Development
```bash
chmod +x start-dev.sh
./start-dev.sh
```

Or manually:
```bash
# Terminal 1 - Backend
cd backend
npm run dev

# Terminal 2 - Frontend
npm run dev
```

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

## 📋 Configuration Files

### Frontend (/.env)
```env
VITE_API_URL=http://localhost:5000/api  ← Points to Node.js backend
VITE_APP_NAME=Enamel Wallet
VITE_TEST_MODE=true
# ... and more
```

### Backend (/backend/.env)
```env
PORT=5000
DB_NAME=enamel_wallet
DB_USER=postgres
DB_PASSWORD=postgres  ← Update with your password
JWT_SECRET=enamel-wallet-super-secure-jwt-secret...
PAYSTACK_SECRET_KEY=sk_test_...  ← Add your Paystack key
PREMBLY_API_KEY=...  ← Add your Prembly key
CORS_ORIGIN=http://localhost:5173
# ... and more
```

## 🔑 API Keys Needed

For full functionality, add these keys to `/backend/.env`:

1. **Paystack** (Payment Processing)
   - Get from: https://dashboard.paystack.com
   - Add: `PAYSTACK_SECRET_KEY=sk_test_...`

2. **Prembly** (KYC Verification)
   - Get from: https://prembly.com/developers
   - Add: `PREMBLY_API_KEY=...` and `PREMBLY_APP_ID=...`

3. **Termii** (SMS - Optional)
   - Get from: https://termii.com/
   - Add: `TERMII_API_KEY=...`

## ✅ Verify Fix

1. **No more errors**: Check browser console ✓
2. **API calls work**: Open Network tab, see calls to `localhost:5000/api` ✓
3. **Can sign up/login**: Test user registration ✓

## 📚 More Documentation

- **Complete Fix Details**: `/FIX_APPLIED.md`
- **Quick Fix Guide**: `/QUICK_FIX_GUIDE.md`
- **Backend API**: `/backend/README.md`
- **Migration Guide**: `/BACKEND_MIGRATION_GUIDE.md`

## 🐛 Still Having Issues?

### Error: "Cannot connect to backend"
```bash
# Check backend is running
curl http://localhost:5000/api/system/health

# Should return: {"status":"ok","timestamp":"..."}
```

### Error: "Database connection failed"
```bash
# Check PostgreSQL is running
pg_isready

# Check database exists
psql -l | grep enamel_wallet

# Update credentials in backend/.env
```

### Error: "Port already in use"
```bash
# Kill process on port 5000
lsof -ti:5000 | xargs kill -9

# Or use different port in backend/.env
PORT=5001
```

### Still stuck?
Run the environment check:
```bash
./check-env.sh
```

This will show exactly what needs to be fixed.

## 🎉 You're All Set!

The environment variable error is fixed. Your Enamel Wallet app is ready for development!

**Next Steps:**
1. Run `./check-env.sh` to verify setup
2. Run `./start-dev.sh` to start servers
3. Open http://localhost:5173
4. Start building! 🚀

---

**Questions?** Check the documentation files or review the setup scripts.