Fix critical errors: infinite loop, database schema, and add comprehensive E2E tests
## Critical Fixes: 1. **Fix infinite loop in useGasEstimate hook** - Removed unstable `params` dependency causing infinite re-renders - Removed wallet connection requirement for MVP - Simplified to only depend on stable `transactionType` - Fixes "Maximum update depth exceeded" error spam 2. **Fix database schema mismatches** - Removed `blockchain_escrow` from Wallet model - Removed blockchain fields from Bet model (blockchain_bet_id, blockchain_tx_hash, blockchain_status) - Models now match existing database schema - Fixes "OperationalError: no such column" errors 3. **Fix bet creation** - useBlockchainBet now makes real API calls (not pseudocode) - Bets properly created in database - Returns actual bet IDs and status ## Testing: - Added comprehensive Playwright E2E test suite (test-e2e-comprehensive.js) - Tests all critical flows: login, marketplace, wallet, create bet, my bets, navigation - Captures all console errors and warnings - Result: ✅ 0 errors (was 500+) ## Development: - Added docker-compose.dev.yml for local development with hot-reload - Added dev.sh quick-start script - Added LOCAL_DEVELOPMENT.md comprehensive guide - Updated vite.config.ts to support dynamic ports (dev=5173, prod=80) - Updated README with documentation links ## Files Changed: Backend: - backend/app/models/wallet.py - Remove blockchain_escrow field - backend/app/models/bet.py - Remove blockchain fields Frontend: - frontend/src/blockchain/hooks/useGasEstimate.ts - Fix infinite loop - frontend/src/blockchain/hooks/useBlockchainBet.ts - Add real API calls - frontend/vite.config.ts - Dynamic port support Docs/Scripts: - FIXES_APPLIED.md - Detailed fix documentation - LOCAL_DEVELOPMENT.md - Local dev guide - docker-compose.dev.yml - Dev environment config - dev.sh - Quick start script - test-e2e-comprehensive.js - E2E test suite 🚀 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
319
LOCAL_DEVELOPMENT.md
Normal file
319
LOCAL_DEVELOPMENT.md
Normal file
@ -0,0 +1,319 @@
|
||||
# Local Development Guide
|
||||
|
||||
## Quick Start with Docker (Recommended)
|
||||
|
||||
### 1. Start Local Development Environment
|
||||
|
||||
```bash
|
||||
# Start both backend and frontend with hot-reload
|
||||
docker compose -f docker-compose.dev.yml up --build
|
||||
|
||||
# Or run in background
|
||||
docker compose -f docker-compose.dev.yml up -d --build
|
||||
```
|
||||
|
||||
### 2. Access the Application
|
||||
|
||||
- **Frontend**: http://localhost:5173
|
||||
- **Backend API**: http://localhost:8000
|
||||
- **API Docs**: http://localhost:8000/docs
|
||||
|
||||
### 3. Watch Logs
|
||||
|
||||
```bash
|
||||
# View all logs
|
||||
docker compose -f docker-compose.dev.yml logs -f
|
||||
|
||||
# View backend logs only
|
||||
docker compose -f docker-compose.dev.yml logs -f backend
|
||||
|
||||
# View frontend logs only
|
||||
docker compose -f docker-compose.dev.yml logs -f frontend
|
||||
```
|
||||
|
||||
### 4. Stop Development Environment
|
||||
|
||||
```bash
|
||||
docker compose -f docker-compose.dev.yml down
|
||||
|
||||
# Or stop and remove volumes (resets database)
|
||||
docker compose -f docker-compose.dev.yml down -v
|
||||
```
|
||||
|
||||
## What's Different from Production?
|
||||
|
||||
| Setting | Local Development | Production (Coolify) |
|
||||
|---------|------------------|----------------------|
|
||||
| Backend Port | 8000 (mapped to host) | 80 (internal only) |
|
||||
| Frontend Port | 5173 (mapped to host) | 80 (internal only) |
|
||||
| API URL | http://localhost:8000 | https://h2h-backend.host.letsgetnashty.com |
|
||||
| WebSocket URL | ws://localhost:8000 | wss://h2h-backend.host.letsgetnashty.com |
|
||||
| Hot Reload | ✅ Enabled (volume mounts) | ❌ Disabled (no volume mounts) |
|
||||
| File Changes | Live updates | Requires rebuild |
|
||||
|
||||
## Manual Setup (Without Docker)
|
||||
|
||||
### Backend Setup
|
||||
|
||||
```bash
|
||||
cd backend
|
||||
|
||||
# Create virtual environment
|
||||
python -m venv venv
|
||||
source venv/bin/activate # Windows: venv\Scripts\activate
|
||||
|
||||
# Install dependencies
|
||||
pip install -r requirements.txt
|
||||
|
||||
# Initialize database with test data
|
||||
python seed_data.py
|
||||
|
||||
# Run development server
|
||||
uvicorn app.main:app --reload --host 0.0.0.0 --port 8000
|
||||
```
|
||||
|
||||
**Access**: http://localhost:8000/docs
|
||||
|
||||
### Frontend Setup
|
||||
|
||||
```bash
|
||||
cd frontend
|
||||
|
||||
# Install dependencies
|
||||
npm install
|
||||
|
||||
# Run development server
|
||||
npm run dev
|
||||
```
|
||||
|
||||
**Access**: http://localhost:5173
|
||||
|
||||
## Test Users
|
||||
|
||||
After running `seed_data.py`, you'll have these test accounts:
|
||||
|
||||
| Email | Password | Balance |
|
||||
|-------|----------|---------|
|
||||
| alice@example.com | password123 | $1000 |
|
||||
| bob@example.com | password123 | $1000 |
|
||||
| charlie@example.com | password123 | $1000 |
|
||||
|
||||
## Development Workflow
|
||||
|
||||
### Making Changes
|
||||
|
||||
1. **Edit backend code** (Python files in `backend/app/`)
|
||||
- Changes auto-reload if using Docker or `uvicorn --reload`
|
||||
- Check logs for errors
|
||||
|
||||
2. **Edit frontend code** (TypeScript/React files in `frontend/src/`)
|
||||
- Changes instantly appear in browser (Vite HMR)
|
||||
- Check browser console for errors
|
||||
|
||||
### Testing Your Changes
|
||||
|
||||
```bash
|
||||
# Test backend API endpoint
|
||||
curl http://localhost:8000/api/v1/bets
|
||||
|
||||
# Test backend with authentication
|
||||
curl -H "Authorization: Bearer YOUR_TOKEN" http://localhost:8000/api/v1/bets/my/active
|
||||
|
||||
# Check backend health
|
||||
curl http://localhost:8000/health
|
||||
```
|
||||
|
||||
### Resetting Database
|
||||
|
||||
```bash
|
||||
# Stop containers
|
||||
docker compose -f docker-compose.dev.yml down -v
|
||||
|
||||
# Start fresh (will re-seed on first run)
|
||||
docker compose -f docker-compose.dev.yml up --build
|
||||
```
|
||||
|
||||
Or manually:
|
||||
|
||||
```bash
|
||||
cd backend
|
||||
rm -rf data/h2h.db # Delete database
|
||||
python seed_data.py # Recreate with test data
|
||||
```
|
||||
|
||||
## Common Issues
|
||||
|
||||
### Port Already in Use
|
||||
|
||||
**Error**: `Bind for 0.0.0.0:8000 failed: port is already allocated`
|
||||
|
||||
**Solution**: Stop other services using those ports:
|
||||
|
||||
```bash
|
||||
# Find what's using port 8000
|
||||
lsof -i :8000
|
||||
|
||||
# Stop the process (macOS/Linux)
|
||||
kill -9 <PID>
|
||||
|
||||
# Or use different ports in docker-compose.dev.yml
|
||||
ports:
|
||||
- "8001:8000" # Map host 8001 to container 8000
|
||||
```
|
||||
|
||||
### Module Not Found (Backend)
|
||||
|
||||
**Error**: `ModuleNotFoundError: No module named 'app'`
|
||||
|
||||
**Solution**:
|
||||
|
||||
```bash
|
||||
# Rebuild backend container
|
||||
docker compose -f docker-compose.dev.yml up --build backend
|
||||
```
|
||||
|
||||
### Package Not Found (Frontend)
|
||||
|
||||
**Error**: `npm error enoent Could not read package.json`
|
||||
|
||||
**Solution**:
|
||||
|
||||
```bash
|
||||
# Rebuild frontend container
|
||||
docker compose -f docker-compose.dev.yml up --build frontend
|
||||
```
|
||||
|
||||
### Database Locked
|
||||
|
||||
**Error**: `database is locked`
|
||||
|
||||
**Solution**: SQLite doesn't handle concurrent writes well. Restart:
|
||||
|
||||
```bash
|
||||
docker compose -f docker-compose.dev.yml restart backend
|
||||
```
|
||||
|
||||
### Hot Reload Not Working
|
||||
|
||||
**Issue**: Changes not appearing
|
||||
|
||||
**Solution**:
|
||||
|
||||
1. Check volume mounts are working:
|
||||
```bash
|
||||
docker compose -f docker-compose.dev.yml exec backend ls -la /app
|
||||
```
|
||||
|
||||
2. Restart containers:
|
||||
```bash
|
||||
docker compose -f docker-compose.dev.yml restart
|
||||
```
|
||||
|
||||
## IDE Setup
|
||||
|
||||
### VS Code
|
||||
|
||||
**Recommended Extensions**:
|
||||
- Python (ms-python.python)
|
||||
- Pylance (ms-python.vscode-pylance)
|
||||
- ES Lint (dbaeumer.vscode-eslint)
|
||||
- Tailwind CSS IntelliSense (bradlc.vscode-tailwindcss)
|
||||
|
||||
**Settings** (.vscode/settings.json):
|
||||
```json
|
||||
{
|
||||
"python.linting.enabled": true,
|
||||
"editor.formatOnSave": true,
|
||||
"python.analysis.typeCheckingMode": "basic"
|
||||
}
|
||||
```
|
||||
|
||||
### Python Type Checking
|
||||
|
||||
```bash
|
||||
cd backend
|
||||
source venv/bin/activate
|
||||
mypy app/
|
||||
```
|
||||
|
||||
### Frontend Type Checking
|
||||
|
||||
```bash
|
||||
cd frontend
|
||||
npm run type-check # If configured in package.json
|
||||
```
|
||||
|
||||
## Debugging
|
||||
|
||||
### Backend Debugging
|
||||
|
||||
Add breakpoints in your IDE or use:
|
||||
|
||||
```python
|
||||
import pdb; pdb.set_trace() # Python debugger
|
||||
```
|
||||
|
||||
### Frontend Debugging
|
||||
|
||||
Use browser DevTools:
|
||||
- **Console**: View logs and errors
|
||||
- **Network**: Inspect API calls
|
||||
- **React DevTools**: Inspect component state
|
||||
|
||||
## File Watching
|
||||
|
||||
Docker uses file watching to detect changes. If you have a large codebase:
|
||||
|
||||
**macOS**: Increase file watch limit:
|
||||
```bash
|
||||
# Add to ~/.bash_profile or ~/.zshrc
|
||||
export DOCKER_MAX_FILE_WATCHES=524288
|
||||
```
|
||||
|
||||
**Linux**: Increase inotify watches:
|
||||
```bash
|
||||
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf
|
||||
sudo sysctl -p
|
||||
```
|
||||
|
||||
## Production Preview (Local)
|
||||
|
||||
To test the production build locally:
|
||||
|
||||
```bash
|
||||
# Use production docker-compose (port 80 mapping)
|
||||
docker compose up --build
|
||||
|
||||
# Access via:
|
||||
# Backend: http://localhost (if mapped)
|
||||
# Frontend: http://localhost (if mapped)
|
||||
```
|
||||
|
||||
Note: You may need to add port mappings to test on macOS/Windows:
|
||||
```yaml
|
||||
ports:
|
||||
- "80:80" # Requires sudo/admin on port 80
|
||||
# Or use alternative ports:
|
||||
- "8080:80" # Access via http://localhost:8080
|
||||
```
|
||||
|
||||
## Switching Between Dev and Production
|
||||
|
||||
**Local Development**:
|
||||
```bash
|
||||
docker compose -f docker-compose.dev.yml up
|
||||
```
|
||||
|
||||
**Production Build (Local)**:
|
||||
```bash
|
||||
docker compose up
|
||||
```
|
||||
|
||||
**Production Deployment (Coolify)**:
|
||||
```bash
|
||||
git push # Coolify auto-deploys
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Happy coding! 🚀
|
||||
Reference in New Issue
Block a user