📦 What You Have

✅ Next.js Frontend - Modern React app with API integration
✅ Nginx Load Balancer - Routes traffic between frontend and backend
✅ .NET 8.0 Backend - RESTful API with Swagger documentation
✅ Docker Setup - Complete containerization with docker-compose

🚀 Quick Start (3 Commands)

# 1. Navigate to the project directory
cd docker-setup

# 2. Build and start all services
docker-compose up --build

# 3. Open your browser
# Frontend: http://localhost:3000
# Swagger:  http://localhost:80/swagger (via load balancer)

That's it! 🎊

🧪 Testing the Full Stack

1. Test Frontend

Open http://localhost:3000 in your browser. You should see:

• Beautiful gradient "Hello World!" title
• Three cards showing the tech stack
• "Test Backend API" button

2. Test Backend Connection

Click the "Test Backend API" button on the frontend. You should see:

{
  "success": true,
  "message": "Successfully connected to .NET backend!",
  "backend": {
    "message": "Hello from .NET Backend!",
    "timestamp": "2024-02-20T10:30:00Z",
    "version": "1.0.0",
    "framework": ".NET 8.0"
  },
  "connectedAt": "2024-02-20T10:30:05Z"
}

3. Test Backend Directly

Via Load Balancer:

# Health check
curl http://localhost/api/health

# Hello endpoint
curl http://localhost/api/hello

# Time endpoint
curl http://localhost/api/time

# Echo endpoint
curl -X POST http://localhost/api/echo \
  -H "Content-Type: application/json" \
  -d '{"message":"Testing!"}'

Direct to Backend (bypassing load balancer):

curl http://localhost:5000/api/hello

4. Explore Swagger API Documentation

Open http://localhost/swagger in your browser to see interactive API documentation.

📊 Architecture Overview

┌─────────────┐
│   Browser   │
└──────┬──────┘
       │
       ↓
┌──────────────────────────────┐
│  Next.js Frontend            │
│  http://localhost:3000       │
└──────────┬───────────────────┘
           │
           ↓
┌──────────────────────────────┐
│  Nginx Load Balancer         │
│  http://localhost:80         │
│  - Routes to frontend        │
│  - Routes /api/* to backend  │
└──────────┬───────────────────┘
           │
           ↓
┌──────────────────────────────┐
│  .NET Backend                │
│  Internal: backend:5000      │
│  - REST API                  │
│  - Swagger docs             │
└──────────────────────────────┘

🔍 Verify Everything is Running

# Check running containers
docker-compose ps

# You should see:
# nextjs-frontend       running
# nginx-loadbalancer    running
# dotnet-backend        running

# View logs
docker-compose logs -f

# View specific service logs
docker-compose logs -f backend
docker-compose logs -f frontend
docker-compose logs -f nginx

🛠️ Development Workflow

Modify Frontend

1. Edit files in frontend/app/
2. Rebuild: docker-compose up --build frontend
3. Or develop locally: cd frontend && npm install && npm run dev

Modify Backend

1. Edit files in backend/
2. Rebuild: docker-compose up --build backend
3. Or develop locally: cd backend && dotnet run

Modify Nginx Config

1. Edit nginx/nginx.conf
2. Restart: docker-compose restart nginx

📝 API Endpoints Available

Method	Endpoint	Description
GET	http://localhost:3000	Frontend UI
GET	http://localhost/api/health	Backend health
GET	http://localhost/api/hello	Hello message
GET	http://localhost/api/time	Current time
POST	http://localhost/api/echo	Echo message
GET	http://localhost/swagger	API docs

🎯 Next Steps

1. Add Database

# Add PostgreSQL to docker-compose.yml
services:
  postgres:
    image: postgres:16-alpine
    environment:
      POSTGRES_DB: myapp
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password
    ports:
      - "5432:5432"

2. Add Authentication

• Install JWT packages in backend
• Create login/register endpoints
• Add auth context in frontend

3. Add More Features

• User management
• File uploads
• Real-time features with SignalR
• Caching with Redis

4. Production Deployment

• Add SSL certificates to Nginx
• Use environment variables for secrets
• Set up CI/CD pipeline
• Add monitoring and logging

🐛 Troubleshooting

Frontend can't connect to backend

# Check if backend is running
docker-compose ps backend

# Check backend logs
docker-compose logs backend

# Restart backend
docker-compose restart backend

Port conflicts

# Change ports in docker-compose.yml
# For frontend: Change "3000:3000" to "3001:3000"
# For nginx: Change "80:80" to "8080:80"

Rebuild from scratch

# Stop and remove everything
docker-compose down -v

# Rebuild and restart
docker-compose up --build

Backend not responding

# Check if it's listening on correct port
docker-compose exec backend netstat -tlnp

# Check environment variables
docker-compose exec backend env | grep ASPNETCORE

📚 Learn More

Frontend (Next.js)

• Next.js Documentation
• React Documentation

Backend (.NET)

• .NET Documentation
• ASP.NET Core

Load Balancer (Nginx)

• Nginx Documentation
• Nginx Load Balancing

Docker

• Docker Documentation
• Docker Compose

🎊 Success Indicators

Your setup is working if:

1. ✅ All three containers show as "running" in docker-compose ps
2. ✅ Frontend loads at http://localhost:3000
3. ✅ "Test Backend API" button returns JSON with backend info
4. ✅ Swagger UI loads at http://localhost/swagger
5. ✅ All curl commands return valid JSON responses

---

Congratulations! 🎉 You have a fully functional full-stack application running in Docker!

Need help? Check the README files in each directory for detailed documentation.