Skip to content

Conversation

@LeSoviet
Copy link
Owner

@LeSoviet LeSoviet commented Oct 19, 2025

🐳 Docker Setup Implementation

Adds complete Docker Compose configuration for easy local development without manual PostgreSQL installation.


📋 Changes

New Files

  • docker-compose.yml - Orchestrates PostgreSQL, backend, and frontend services
  • apps/backend/Dockerfile - Multi-stage build with Node 18 Alpine, pnpm, and Prisma
  • apps/frontend/Dockerfile - Vite dev server with hot module replacement
  • apps/backend/.dockerignore - Optimizes build context for backend
  • apps/frontend/.dockerignore - Optimizes build context for frontend

Modified Files

  • README.md - Added "Quick Start with Docker" section at the top

✨ Features

Services

  • PostgreSQL 14 Alpine - Database with health check
  • Backend (Node 18 Alpine) - Auto-migrates and seeds on first run
  • Frontend (Node 18 Alpine) - Vite dev server with HMR enabled

Developer Experience

  • Zero Configuration - No need to install PostgreSQL, Node.js, or pnpm
  • One Command Start - docker compose up --build
  • Hot Reload - Changes to source code automatically reload services
  • Persistent Data - PostgreSQL data persists in Docker volume
  • Health Checks - Backend waits for PostgreSQL to be healthy
  • Isolated Environment - Clean, reproducible development setup

🚀 Quick Start

With Docker (Recommended)

# Start all services
docker compose up --build

# Application will be available at:
# - Frontend: http://localhost:5173
# - Backend: http://localhost:3000
# - PostgreSQL: localhost:5432

Useful Commands

# Start in background
docker compose up -d

# View logs
docker compose logs -f backend
docker compose logs -f frontend

# Stop services
docker compose down

# Reset database (remove volume)
docker compose down -v

# Run tests in Docker
docker compose exec backend pnpm --filter backend test
docker compose exec frontend pnpm --filter frontend test --run

# Open Prisma Studio
docker compose exec backend pnpm --filter backend prisma:studio

🧪 Testing

Tested Scenarios

  • ✅ Fresh installation (clean database)
  • ✅ Hot reload for backend code changes
  • ✅ Hot reload for frontend code changes
  • ✅ Hot reload for shared types changes
  • ✅ Database persistence across restarts
  • ✅ Auto-migration on first run
  • ✅ Auto-seeding with 10 sample orders
  • ✅ All 15 tests passing (10 backend + 5 frontend)

Test Results

# Backend Tests
docker compose exec backend pnpm --filter backend test
# ✅ 10 tests passing

# Frontend Tests
docker compose exec frontend pnpm --filter frontend test --run
# ✅ 5 tests passing

📊 Docker Image Sizes

Service Base Image Final Size (approx)
PostgreSQL postgres:14-alpine ~230MB
Backend node:18-alpine ~450MB
Frontend node:18-alpine ~450MB
Total ~1.1GB

🎯 Requirements Checklist

This PR completes the final bonus point from the original requirements:

Core Requirements

  • ✅ Backend CRUD with TypeScript + Express + PostgreSQL
  • ✅ Frontend with React 19 + TypeScript
  • ✅ Pagination and filtering
  • ✅ All required endpoints implemented
  • ✅ Proper TypeScript types everywhere

Bonus Points

  • ✅ Status filtering (backend + frontend)
  • ✅ Comprehensive testing (15 tests)
  • ✅ Shared types monorepo setup
  • ✅ Comprehensive documentation
  • ✅ ESLint + Prettier configuration
  • ✅ Professional error handling
  • ✅ Toast notifications
  • ✅ Postman collection
  • Docker setup for easy local development 🐳 ← THIS PR

📹 Video Walkthrough

[Add YouTube/Loom link here - 5 min max]

Video includes:

  1. Project architecture overview
  2. Code walkthrough (monorepo, shared types, controllers)
  3. Demo with Docker (docker compose up)
  4. Full CRUD operations demo
  5. Testing execution
  6. Bonus features showcase

🔍 Code Review Notes

Docker Compose Configuration

  • Uses version: '3.8' for compatibility
  • Health check on PostgreSQL ensures backend starts after DB is ready
  • Volume mounts enable hot reload for development
  • Named volumes persist database data
  • Bridge network isolates services

Dockerfile Best Practices

  • Multi-stage builds for optimization
  • Alpine base images for smaller size
  • Layer caching with separate dependency installation
  • .dockerignore files exclude unnecessary files
  • Non-root user for security (inherited from node:alpine)

Auto-Migration Strategy

  • Backend runs prisma migrate deploy on startup
  • Seeds database only if empty
  • Idempotent seed script prevents duplicate data

💡 Usage Tips

For Development

# Make changes to code - they'll reload automatically
# Backend: tsx watch mode
# Frontend: Vite HMR
# Shared types: Changes reflect immediately

For Testing

# You can run tests while services are running
docker compose exec backend pnpm --filter backend test

For Database Management

# Access Prisma Studio
docker compose exec backend pnpm --filter backend prisma:studio
# Opens at http://localhost:5555

For Debugging

# View logs in real-time
docker compose logs -f

# Access container shell
docker compose exec backend sh
docker compose exec frontend sh

🐛 Known Issues

None at the moment. All services start successfully and hot reload works as expected.


📝 Additional Notes

  • Docker Compose v2 syntax used (docker compose instead of docker-compose)
  • Windows users: Ensure WSL 2 is installed and updated
  • First build takes ~5-10 minutes due to dependency installation
  • Subsequent starts are much faster (~30 seconds)
  • Database volume persists across docker compose down
  • Use docker compose down -v to reset database

Ready for review! 🚀

This PR can be merged into Order-Management-System-with-both-frontend-and-backend, and then the entire feature branch can be merged to main.

@LeSoviet LeSoviet self-assigned this Oct 19, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants