# 🚀 START HERE - Enamel Wallet Development

Welcome! Your Enamel Wallet application environment has been fixed and is ready for development.

## ✅ What Just Happened?

The `VITE_API_URL` error has been **FIXED**! 

All necessary environment files and configurations have been created for you.

## 🎯 Quick Start (30 seconds)

```bash
# 1. Check everything is set up correctly
chmod +x check-env.sh && ./check-env.sh

# 2. Start both backend and frontend servers
chmod +x start-dev.sh && ./start-dev.sh

# 3. Open your browser to:
# http://localhost:5173
```

That's it! Your app should now be running.

## 📁 Important Files Created

| File | Purpose |
|------|---------|
| `/.env` | Frontend environment variables |
| `/backend/.env` | Backend environment variables |
| `/backend/.env.example` | Backend template |
| `/.gitignore` | Prevents committing secrets |
| `/start-dev.sh` | One-command server start |
| `/check-env.sh` | Environment validation |

## 🔧 Configuration Overview

### Frontend Configuration (/.env)
- ✅ `VITE_API_URL` → Points to Node.js backend at `http://localhost:5000/api`
- ✅ App name, branding, feature flags
- ✅ Test mode enabled for development

### Backend Configuration (/backend/.env)
- ✅ Server runs on port `5000`
- ✅ PostgreSQL database connection
- ✅ JWT authentication secrets
- ⚠️ Paystack key needs your real key
- ⚠️ Prembly key needs your real key
- ✅ CORS configured for localhost

## 🗄️ Database Setup

If you haven't set up the database yet:

```bash
# 1. Create database
createdb enamel_wallet

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

# 3. Update database credentials in backend/.env
# Edit: DB_USER, DB_PASSWORD
```

## 🔑 API Keys Setup

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

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

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

### 3. Termii (Optional for SMS)
```bash
# Get from: https://termii.com/
TERMII_API_KEY=your_api_key
TERMII_SENDER_ID=EnamelWallet
```

## 📖 Documentation Guide

Choose based on what you need:

| Document | When to Read |
|----------|--------------|
| **START_HERE.md** (this file) | First time setup - you're here! |
| **ENV_FIX_README.md** | Quick fix guide |
| **QUICK_FIX_GUIDE.md** | Troubleshooting steps |
| **FIX_APPLIED.md** | Detailed fix explanation |
| **NODEJS_BACKEND_README.md** | Backend architecture |
| **backend/README.md** | Backend API reference |
| **BACKEND_MIGRATION_GUIDE.md** | Migration from Supabase |
| **DEPLOYMENT_GUIDE.md** | Production deployment |

## 🧪 Verify Everything Works

### 1. Check Environment
```bash
./check-env.sh
```
Should show all ✓ checks passing (warnings are OK for now).

### 2. Test Backend
```bash
cd backend
npm run dev
# Should see: "Server running on port 5000"

# In another terminal:
curl http://localhost:5000/api/system/health
# Should return: {"status":"ok",...}
```

### 3. Test Frontend
```bash
npm run dev
# Should see: "Local: http://localhost:5173"

# Open browser to http://localhost:5173
# No errors in console ✓
```

### 4. Test Complete Flow
1. Open http://localhost:5173
2. Click "Sign Up"
3. Enter details and create account
4. Check Network tab - API calls to `localhost:5000/api` ✓

## 🔄 Development Workflow

### Starting Development
```bash
# Option 1: Use helper script (recommended)
./start-dev.sh

# Option 2: Manual start
# Terminal 1:
cd backend && npm run dev

# Terminal 2:
npm run dev
```

### Stopping Servers
```bash
# If using start-dev.sh:
# Press Ctrl+C

# If manual:
# Press Ctrl+C in each terminal
```

### Making Changes
1. Edit files in `/components`, `/utils`, `/backend/src`
2. Changes auto-reload (hot reload enabled)
3. Check browser console and terminal for errors

## 🎨 Application Features

Your Enamel Wallet includes:

### Core Features
- ✅ Dual wallet system (Spend & Savings)
- ✅ User authentication (email or phone)
- ✅ KYC verification
- ✅ P2P transfers
- ✅ Utility payments (airtime, data, bills)
- ✅ Group savings (10-20 people)
- ✅ Transaction history
- ✅ Dark/Light mode

### Admin Features
- ✅ Admin dashboard
- ✅ User management
- ✅ Account crediting
- ✅ System health monitoring
- ✅ Analytics & reporting

### Integrations
- ✅ Paystack (payments)
- ✅ Prembly (KYC)
- ✅ Termii (SMS - optional)

## 🐛 Common Issues & Fixes

### "Backend won't start"
```bash
# Check port 5000 is free
lsof -i :5000
# If occupied, kill it: lsof -ti:5000 | xargs kill -9

# Check PostgreSQL is running
pg_isready
```

### "Frontend can't connect to backend"
```bash
# Verify VITE_API_URL in .env
cat .env | grep VITE_API_URL
# Should be: http://localhost:5000/api

# Check backend is running
curl http://localhost:5000/api/system/health
```

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

# Check credentials in backend/.env match your PostgreSQL
cat backend/.env | grep DB_
```

### "Still seeing VITE_API_URL error"
```bash
# 1. Verify .env exists
ls -la .env

# 2. Restart dev server (Ctrl+C, then restart)

# 3. Clear cache
rm -rf node_modules/.vite
npm run dev
```

## 📊 Project Structure

```
enamel-wallet/
├── .env                    ← Frontend config (created ✓)
├── backend/
│   ├── .env               ← Backend config (created ✓)
│   ├── src/
│   │   ├── routes/        ← API endpoints
│   │   ├── middleware/    ← Auth, validation
│   │   └── database/      ← Database schema
│   └── package.json
├── components/            ← React components
├── utils/
│   ├── api.ts            ← API client (fixed ✓)
│   └── ...
├── start-dev.sh          ← Start script (created ✓)
├── check-env.sh          ← Validation script (created ✓)
└── documentation files...
```

## 🚀 Next Steps

1. **Now**: Run `./check-env.sh` to verify setup
2. **Then**: Run `./start-dev.sh` to start servers
3. **Next**: Add your Paystack and Prembly API keys
4. **Finally**: Start building features! 🎉

## 🎯 Development Checklist

- [ ] Environment files created (✓ Done!)
- [ ] Dependencies installed (`npm install`)
- [ ] Database created and schema loaded
- [ ] Backend running on port 5000
- [ ] Frontend running on port 5173
- [ ] No console errors
- [ ] Can sign up/login
- [ ] API keys added (Paystack, Prembly)

## 💡 Tips

- **Environment check**: Run `./check-env.sh` anytime
- **View logs**: Check `backend.log` and `frontend.log`
- **API testing**: Use browser Network tab or Postman
- **Database**: Use `psql -d enamel_wallet` to inspect data
- **Hot reload**: Changes auto-reload in development

## 📞 Resources

- **Backend API Docs**: http://localhost:5000/api/system/health
- **Frontend**: http://localhost:5173
- **Database**: `psql -d enamel_wallet`

## ✅ You're Ready!

Everything is set up and ready to go. Run the commands below and start building:

```bash
./check-env.sh     # Verify setup
./start-dev.sh     # Start servers
```

Then open **http://localhost:5173** and enjoy! 🎉

---

**Need help?** Check the documentation files or run `./check-env.sh` for diagnostics.