I've created a complete integration testing and verification package for your frontend-backend-database system. Here's what you have:
- What: Fastest way to get running
- Time: 5-10 minutes
- Includes:
- 3-step startup process
- Quick verification commands
- Access points (Frontend, Backend, Databases)
- Troubleshooting for common issues
- Best For: Getting started quickly
- What: Complete 12-step testing methodology
- Time: 30-60 minutes for complete verification
- Includes:
- Health checks (backend, nginx, database)
- Port availability verification
- API endpoint testing
- Database connection verification
- Redis cache verification
- CORS configuration testing
- End-to-end data persistence testing
- Troubleshooting common issues
- Best For: Thorough understanding and complete verification
- What: Visual architecture and data flow diagrams
- Includes:
- Infrastructure overview diagram
- User registration flow (detailed)
- User login flow
- Authenticated request flow
- Caching flow (Redis)
- Job queue flow (BullMQ)
- Data persistence verification
- Security layers
- Request/response cycle timing
- Best For: Understanding how everything connects
- What: Real API examples and curl commands
- Includes:
- Health check endpoints
- Authentication endpoints (register, login, refresh, logout)
- User profile endpoints (get, update)
- Database verification queries
- Redis verification commands
- Error scenario examples
- Complete end-to-end test sequence
- Postman collection format
- Best For: Testing specific endpoints manually
- What: Copy-paste JavaScript for browser console
- Includes:
- Health check tests
- CORS verification
- Registration endpoint test
- Protected endpoint test
- Local storage inspection
- Network diagnosis
- Utility functions (clearTokens, getTokens, etc.)
- Best For: Testing from the frontend/browser
.\cleanup.ps1- What: Cleans up all processes and containers
- Does:
- ✓ Kills processes using ports 3000, 5173, 5432, 6379, 80, 443
- ✓ Kills all Node and npm processes
- ✓ Stops Docker Compose services
- ✓ Clears npm cache
- Time: 1-2 minutes
- Must Run As: Administrator
.\test-integration.ps1- What: Comprehensive automated test suite
- Tests (9 sections):
- Docker containers status
- Backend health endpoints
- Frontend access
- CORS headers
- Database connection
- Redis connection
- Port availability
- API endpoints
- Backend logs
- Time: 3-5 minutes
- Output: ✓/✗ for each test + summary
- Best For: Quick full system verification
bash quick-verify.sh- What: Quick verification (UNIX/Linux/Mac)
- Tests: Health, database, redis, containers
- Time: 1-2 minutes
- Output: Pass/Fail summary
# Step 1: Clean everything
.\cleanup.ps1
# Step 2: Start services
docker-compose up -d
# Step 3: Wait for startup
Start-Sleep -Seconds 30
# Step 4: Run tests
.\test-integration.ps1Total Time: ~7 minutes
# Test health
curl http://localhost:3000/health
# Test database
docker-compose exec postgres psql -U neondb_owner -d neondb -c "SELECT 1;"
# Test redis
docker-compose exec redis redis-cli ping
# View logs
docker-compose logs -f backend- Open Frontend: http://localhost/
- Open DevTools: Press F12
- Go to Console tab
- Copy code from FRONTEND_TEST_CONSOLE.js
- Run tests directly in browser
Frontend (React) Backend (Node.js) Database
5173 3000 5432
│ │ │
└──────Nginx(80/443)──┬┘────PostgreSQL─────┘
│
Redis(6379)
User Action → Frontend → Nginx → Backend → Database
↓ ↓
Browser Data Stored
↑ ↓
Updates ← Backend ← Nginx ← Database ← Query
Run through this checklist to verify everything:
-
Setup Phase
- Cleanup completed successfully
- No errors during docker-compose up
- All 5 containers running (docker-compose ps)
-
Backend Connection
- Health endpoint responds: http://localhost:3000/health
- Info endpoint responds: http://localhost:3000/info
- No connection errors in logs
-
Frontend Connection
- Frontend loads: http://localhost/ or http://localhost:5173
- No CORS errors in browser console
- Page displays correctly
-
Database Connection
- PostgreSQL is running
- Can query database (test with psql)
- Sample tables exist
-
Cache Connection
- Redis is running
- Can ping Redis (PONG response)
- No cache errors in logs
-
Data Persistence
- Create user via API
- User appears in database
- Update user data
- Update reflected in database
- Restart services
- Data still exists
-
Authentication
- Can register new user
- Can login with credentials
- Token generated and stored
- Can access protected endpoints with token
-
Error Handling
- Invalid requests return proper errors
- Missing tokens return 401
- Database errors are handled gracefully
1. Run cleanup
2. Run docker-compose up -d
3. Run test-integration.ps1
4. Check all tests pass ✓
Time: 7-10 minutes
1. Register user via API
2. Check database has user record
3. Update user profile
4. Check updates in database
5. Restart backend
6. Verify data still exists
7. Check frontend can load data
Time: 10-15 minutes
1. Open frontend in browser
2. Fill registration form
3. Monitor backend logs
4. Check database for new user
5. Login with credentials
6. Update profile
7. Verify updates in database
8. Logout
9. Login again
10. Verify session works
Time: 15-20 minutes
| I want to... | Go to... |
|---|---|
| Get started quickly | QUICK_START.md |
| Understand the full flow | INTEGRATION_TEST_GUIDE.md |
| See architecture diagrams | ARCHITECTURE.md |
| Test specific endpoints | SAMPLE_API_TESTS.md |
| Test from browser | FRONTEND_TEST_CONSOLE.js |
| Fix port conflicts | cleanup.ps1 |
| Run automated tests | test-integration.ps1 |
| Understand API | backend/src/app.ts |
| Understand API client | frontend/src/services/api.ts |
| Docker setup | docker-compose.yml |
.\cleanup.ps1
docker-compose up -d --build
Start-Sleep -Seconds 30
.\test-integration.ps1# All logs
docker-compose logs
# Specific service logs
docker-compose logs -f backend # Backend
docker-compose logs -f postgres # Database
docker-compose logs -f redis # Cache
docker-compose logs -f nginx # Reverse proxycurl -X POST http://localhost:3000/api/v1/auth/register \
-H "Content-Type: application/json" \
-d '{
"email": "test@example.com",
"password": "TestPassword123!",
"first_name": "Test",
"last_name": "User"
}'# Connect to database
docker-compose exec postgres psql -U neondb_owner -d neondb
# Query users
SELECT id, email, first_name, last_name, created_at FROM users ORDER BY created_at DESC LIMIT 5;# Terminal 1: Backend logs
docker-compose logs -f backend
# Terminal 2: Database logs
docker-compose logs -f postgres
# Terminal 3: Redis logs
docker-compose logs -f redis
# Terminal 4: Run manual tests or use frontendYour integration is working when:
| Metric | Expected |
|---|---|
| Docker Containers | 5/5 running (Up) |
| Health Endpoint | Responds with 200 |
| Database Query | Returns results |
| Redis PING | Responds PONG |
| User Registration | User created in DB |
| Login | Token generated |
| Protected Endpoint | Accessible with token |
| Data Update | Reflected in database |
| Data Persistence | Survives restart |
| CORS | No browser errors |
| Response Time | < 500ms average |
| All Tests | ✓ Pass |
# Option 1: Clean and restart
.\cleanup.ps1
docker-compose down -v
docker-compose up -d --build
# Option 2: Check specific service
docker-compose logs postgres # Check database
docker-compose logs redis # Check cache
docker-compose logs backend # Check API# Find what's using port 3000
netstat -ano | findstr :3000
# Kill the process
taskkill /PID <PID> /F
# Or use the cleanup script
.\cleanup.ps1# Check postgres container
docker-compose logs postgres
# Restart database
docker-compose restart postgres
# Verify connection
docker-compose exec postgres psql -U neondb_owner -c "SELECT 1;"- Check browser console (F12)
- Backend CORS config:
backend/src/api/middleware/logging.middleware.ts - Verify
CORS_ORIGINenvironment variable - Default:
http://localhost
- Official Architecture: ARCHITECTURE.md
- Step-by-Step Guide: INTEGRATION_TEST_GUIDE.md
- API Documentation: SAMPLE_API_TESTS.md
- Docker Issues: Check
docker-compose logs - Backend Code:
backend/src/app.ts - Frontend Code:
frontend/src/services/api.ts
This package teaches you:
- How microservices communicate - Frontend ↔ Backend
- How data is persisted - Backend → Database
- How caching works - Backend ↔ Redis
- API security - JWT tokens, CORS, rate limiting
- System diagnostics - Logs, monitoring, debugging
- Docker containerization - Services, networks, volumes
- HTTP request/response cycles - Headers, status codes, payloads
- Start Here: Read QUICK_START.md
- Run Tests: Execute
.\test-integration.ps1 - Review Results: Check console output
- If Success: ✅ Your integration works!
- If Issues:
- Check INTEGRATION_TEST_GUIDE.md
- Review ARCHITECTURE.md
- Check docker-compose logs
hackto/
├── QUICK_START.md ⭐ Start here
├── INTEGRATION_TEST_GUIDE.md 📖 Complete guide
├── ARCHITECTURE.md 🏗️ System design
├── SAMPLE_API_TESTS.md 🔌 API examples
├── FRONTEND_TEST_CONSOLE.js 💻 Browser tests
│
├── cleanup.ps1 🧹 Cleanup script
├── test-integration.ps1 ✅ Auto tests (Windows)
├── quick-verify.sh ⚡ Auto tests (Linux/Mac)
│
├── docker-compose.yml 🐳 Docker config
├── backend/ 🔧 Backend code
├── frontend/ 🎨 Frontend code
└── certs/ 🔐 SSL certificates
✅ Complete documentation (5 guides) ✅ Automated testing (3 scripts) ✅ Step-by-step instructions ✅ Real code examples ✅ Error handling ✅ Troubleshooting guide ✅ Architecture diagrams ✅ API reference ✅ Browser console tests ✅ Database verification queries ✅ Security considerations ✅ Performance timing
Last Updated: April 13, 2026 Version: 1.0 Complete Package Status: Ready for testing
- Open and read: QUICK_START.md
- Run: .\cleanup.ps1
- Run: docker-compose up -d
- Run: .\test-integration.ps1
- Review results and success indicators
Estimated Total Time: 10-15 minutes
Good luck! 🚀