feat: add React frontend with nginx reverse proxy

- Create React GUI with Vite 6, Tailwind CSS 3, Recharts
- Implement hash-based routing (dashboard, simulation, results)
- Create core components (Button, Card, Input, Spinner)
- Build pages: Dashboard, SimulationForm, SimulationResults
- Add API client with fetch wrapper
- Create multi-stage Dockerfile (Node→Python→Nginx)
- Configure nginx for port 7860 with /api proxy to Django
- Add supervisor for running Django + nginx together
- Add gunicorn for production WSGI server
- Update README with full-stack tech stack
- Frontend builds to 165KB bundle (gzipped: 52KB)

.gitignore

@@ -1,6 +1,8 @@
 # Dependencies and environments
 .venv/
 *.egg-info/
+frontend/node_modules/
+frontend/dist/
 
 # Test artifacts
 .coverage

Dockerfile

@@ -1,4 +1,22 @@
-FROM python:3.12-slim
+# Stage 1: Build React frontend
+FROM node:22-alpine AS frontend-builder
+
+WORKDIR /frontend
+
+# Copy frontend package files
+COPY frontend/package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy frontend source
+COPY frontend/ ./
+
+# Build React app
+RUN npm run build
+
+# Stage 2: Setup Python/Django backend
+FROM python:3.12-slim AS backend
 
 WORKDIR /app
 
@@ -13,14 +31,49 @@ ENV UV_PROJECT_ENVIRONMENT=/app/.venv
 COPY pyproject.toml ./
 COPY uv.lock ./
 
-# Install dependencies using uv with BuildKit cache mount
+# Install dependencies using uv
 RUN --mount=type=cache,target=/root/.cache/uv \
     uv sync --frozen
 
 # Copy application code
 COPY . .
 
-# Run migrations and start Django on port 7860
-# Use python directly since dependencies already installed in venv
-CMD /app/.venv/bin/python manage.py migrate && \
-    /app/.venv/bin/python manage.py runserver 0.0.0.0:7860
+# Run migrations
+RUN /app/.venv/bin/python manage.py migrate
+
+# Stage 3: Final image with nginx
+FROM nginx:alpine
+
+# Install Python and supervisor
+RUN apk add --no-cache python3 py3-pip supervisor
+
+# Copy Python app and venv from backend stage
+COPY --from=backend /app /app
+COPY --from=backend /usr/local/bin/uv /usr/local/bin/uv
+
+# Copy React build from frontend stage
+COPY --from=frontend-builder /frontend/dist /usr/share/nginx/html
+
+# Copy nginx configuration
+COPY nginx.conf /etc/nginx/nginx.conf
+
+# Create supervisor config
+RUN echo '[supervisord]' > /etc/supervisor/conf.d/supervisord.conf && \
+    echo 'nodaemon=true' >> /etc/supervisor/conf.d/supervisord.conf && \
+    echo '' >> /etc/supervisor/conf.d/supervisord.conf && \
+    echo '[program:django]' >> /etc/supervisor/conf.d/supervisord.conf && \
+    echo 'command=/app/.venv/bin/gunicorn config.wsgi:application --bind 127.0.0.1:8000 --workers 2' >> /etc/supervisor/conf.d/supervisord.conf && \
+    echo 'directory=/app' >> /etc/supervisor/conf.d/supervisord.conf && \
+    echo 'autostart=true' >> /etc/supervisor/conf.d/supervisord.conf && \
+    echo 'autorestart=true' >> /etc/supervisor/conf.d/supervisord.conf && \
+    echo '' >> /etc/supervisor/conf.d/supervisord.conf && \
+    echo '[program:nginx]' >> /etc/supervisor/conf.d/supervisord.conf && \
+    echo 'command=nginx -g "daemon off;"' >> /etc/supervisor/conf.d/supervisord.conf && \
+    echo 'autostart=true' >> /etc/supervisor/conf.d/supervisord.conf && \
+    echo 'autorestart=true' >> /etc/supervisor/conf.d/supervisord.conf
+
+WORKDIR /app
+
+EXPOSE 7860
+
+CMD ["/usr/bin/supervisord", "-c", "/etc/supervisor/conf.d/supervisord.conf"]

README.md

@@ -7,9 +7,9 @@ sdk: docker
 app_port: 7860
 ---
 
-# Wall Construction API
+# Wall Construction Tracker
 
-A Django REST API for tracking multi-profile wall construction operations, ice material consumption, and associated costs.
+A full-stack application for tracking multi-profile wall construction operations, ice material consumption, and associated costs. Features a React GUI frontend and Django REST API backend.
 
 ## Features
 
@@ -167,14 +167,28 @@ curl http://localhost:7860/api/profiles/
 
 ## Technology Stack
 
+### Backend
 - **Django 5.2.7 LTS** - Web framework
 - **Django REST Framework 3.16** - API framework
 - **Python 3.12** - Programming language
+- **Gunicorn** - WSGI HTTP server
 - **uv** - Fast Python package manager
 - **SQLite** - File-based database
 - **ThreadPoolExecutor** - Parallel cost calculations
 - **pytest** - Testing framework
 
+### Frontend
+- **React 18** - UI framework
+- **Vite 6** - Build tool
+- **Tailwind CSS 3** - Utility-first CSS
+- **Recharts 2** - Chart library
+- **Hash-based routing** - Client-side navigation
+
+### Infrastructure
+- **Nginx** - Reverse proxy and static file server
+- **Supervisor** - Process control system
+- **Docker multi-stage builds** - Optimized deployment
+
 ## Development Standards
 
 - Dependencies managed via `pyproject.toml` (NOT requirements.txt)

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wall Construction Tracker</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "wall-construction-gui",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "recharts": "^2.15.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^6.0.1",
+    "tailwindcss": "^3.4.1",
+    "autoprefixer": "^10.4.18",
+    "postcss": "^8.4.35"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/App.jsx

@@ -0,0 +1,87 @@
+import { useState, useEffect } from 'react'
+import Dashboard from './pages/Dashboard'
+import SimulationForm from './pages/SimulationForm'
+import SimulationResults from './pages/SimulationResults'
+
+function App() {
+  const [route, setRoute] = useState(window.location.hash.slice(1) || 'dashboard')
+  const [params, setParams] = useState({})
+
+  useEffect(() => {
+    const handleHashChange = () => {
+      const hash = window.location.hash.slice(1)
+      const [path, query] = hash.split('?')
+      setRoute(path || 'dashboard')
+
+      // Parse query params
+      const searchParams = new URLSearchParams(query)
+      const paramsObj = {}
+      searchParams.forEach((value, key) => {
+        paramsObj[key] = value
+      })
+      setParams(paramsObj)
+    }
+
+    window.addEventListener('hashchange', handleHashChange)
+    return () => window.removeEventListener('hashchange', handleHashChange)
+  }, [])
+
+  const navigate = (path, queryParams = {}) => {
+    const query = new URLSearchParams(queryParams).toString()
+    window.location.hash = query ? `${path}?${query}` : path
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <nav className="bg-white shadow-sm mb-8">
+        <div className="max-w-7xl mx-auto px-4 py-4">
+          <div className="flex items-center justify-between">
+            <h1 className="text-xl font-bold text-gray-900">
+              Wall Construction Tracker
+            </h1>
+            <div className="flex gap-4">
+              <button
+                onClick={() => navigate('dashboard')}
+                className={`px-3 py-2 rounded-md ${
+                  route === 'dashboard'
+                    ? 'bg-blue-100 text-blue-700 font-semibold'
+                    : 'text-gray-600 hover:text-gray-900'
+                }`}
+              >
+                Dashboard
+              </button>
+              <button
+                onClick={() => navigate('simulation')}
+                className={`px-3 py-2 rounded-md ${
+                  route === 'simulation'
+                    ? 'bg-blue-100 text-blue-700 font-semibold'
+                    : 'text-gray-600 hover:text-gray-900'
+                }`}
+              >
+                Run Simulation
+              </button>
+              <button
+                onClick={() => navigate('results')}
+                className={`px-3 py-2 rounded-md ${
+                  route === 'results'
+                    ? 'bg-blue-100 text-blue-700 font-semibold'
+                    : 'text-gray-600 hover:text-gray-900'
+                }`}
+              >
+                View Results
+              </button>
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      <main className="max-w-7xl mx-auto px-4 pb-12">
+        {route === 'dashboard' && <Dashboard navigate={navigate} params={params} />}
+        {route === 'simulation' && <SimulationForm navigate={navigate} params={params} />}
+        {route === 'results' && <SimulationResults navigate={navigate} params={params} />}
+      </main>
+    </div>
+  )
+}
+
+export default App

frontend/src/components/Button.jsx

@@ -0,0 +1,29 @@
+export default function Button({
+  children,
+  variant = 'primary',
+  onClick,
+  disabled = false,
+  type = 'button'
+}) {
+  const variants = {
+    primary: 'bg-blue-600 hover:bg-blue-700 text-white',
+    secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-900',
+    danger: 'bg-red-600 hover:bg-red-700 text-white'
+  }
+
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+      className={`
+        px-4 py-2 rounded-lg font-medium
+        transition-colors duration-200
+        disabled:opacity-50 disabled:cursor-not-allowed
+        ${variants[variant]}
+      `}
+    >
+      {children}
+    </button>
+  )
+}

frontend/src/components/Card.jsx

@@ -0,0 +1,7 @@
+export default function Card({ children, className = '' }) {
+  return (
+    <div className={`bg-white rounded-lg shadow-md p-6 ${className}`}>
+      {children}
+    </div>
+  )
+}

frontend/src/components/Input.jsx

@@ -0,0 +1,35 @@
+export default function Input({
+  label,
+  type = 'text',
+  value,
+  onChange,
+  placeholder,
+  required = false,
+  error
+}) {
+  return (
+    <div className="mb-4">
+      {label && (
+        <label className="block text-sm font-medium text-gray-700 mb-2">
+          {label}
+          {required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+      )}
+      <input
+        type={type}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        required={required}
+        className={`
+          w-full px-4 py-2 border rounded-lg
+          focus:outline-none focus:ring-2 focus:ring-blue-500
+          ${error ? 'border-red-500' : 'border-gray-300'}
+        `}
+      />
+      {error && (
+        <p className="text-red-500 text-sm mt-1">{error}</p>
+      )}
+    </div>
+  )
+}

frontend/src/components/Spinner.jsx

@@ -0,0 +1,7 @@
+export default function Spinner() {
+  return (
+    <div className="flex items-center justify-center p-8">
+      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+    </div>
+  )
+}

frontend/src/index.css

@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --color-primary: #3b82f6;
+  --color-secondary: #64748b;
+  --color-success: #10b981;
+  --color-danger: #ef4444;
+  --color-warning: #f59e0b;
+  --color-ice: #93c5fd;
+  --color-gold: #fbbf24;
+}
+
+body {
+  @apply bg-gray-50 text-gray-900;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}

frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

frontend/src/pages/Dashboard.jsx

@@ -0,0 +1,49 @@
+import Card from '../components/Card'
+import Button from '../components/Button'
+
+export default function Dashboard({ navigate }) {
+  return (
+    <div className="space-y-6">
+      <div className="text-center py-12">
+        <h1 className="text-4xl font-bold text-gray-900 mb-4">
+          Wall Construction Tracker
+        </h1>
+        <p className="text-xl text-gray-600 mb-8">
+          Track ice usage and construction costs for the Great Wall of the North
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <Card>
+          <h3 className="text-lg font-semibold mb-2">Run Simulation</h3>
+          <p className="text-gray-600 mb-4">
+            Configure wall sections and simulate construction progress
+          </p>
+          <Button onClick={() => navigate('simulation')}>
+            Start Simulation
+          </Button>
+        </Card>
+
+        <Card>
+          <h3 className="text-lg font-semibold mb-2">View Results</h3>
+          <p className="text-gray-600 mb-4">
+            Analyze ice usage and construction costs by day
+          </p>
+          <Button variant="secondary" onClick={() => navigate('results')}>
+            View Results
+          </Button>
+        </Card>
+
+        <Card>
+          <h3 className="text-lg font-semibold mb-2">API Documentation</h3>
+          <p className="text-gray-600 mb-4">
+            Explore the REST API endpoints
+          </p>
+          <Button variant="secondary" onClick={() => window.location.href = '/api/'}>
+            Browse API
+          </Button>
+        </Card>
+      </div>
+    </div>
+  )
+}

frontend/src/pages/SimulationForm.jsx

@@ -0,0 +1,107 @@
+import { useState } from 'react'
+import Card from '../components/Card'
+import Button from '../components/Button'
+import Input from '../components/Input'
+import Spinner from '../components/Spinner'
+import { api } from '../utils/api'
+
+export default function SimulationForm({ navigate }) {
+  const [config, setConfig] = useState('21 25 28\n17\n17 22 17 19 17')
+  const [numTeams, setNumTeams] = useState('10')
+  const [startDate, setStartDate] = useState('2025-10-20')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+  const [result, setResult] = useState(null)
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setLoading(true)
+    setError(null)
+    setResult(null)
+
+    try {
+      const data = await api.runSimulation(config, parseInt(numTeams), startDate)
+      setResult(data)
+    } catch (err) {
+      setError(err.message || 'Simulation failed')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto space-y-6">
+      <h1 className="text-3xl font-bold text-gray-900">Run Simulation</h1>
+
+      <Card>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Wall Configuration
+              <span className="text-red-500 ml-1">*</span>
+            </label>
+            <textarea
+              value={config}
+              onChange={(e) => setConfig(e.target.value)}
+              required
+              rows="6"
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="Enter wall section heights (space or newline separated)"
+            />
+            <p className="text-sm text-gray-500 mt-1">
+              Example: "21 25 28" creates 3 sections with heights 21, 25, and 28 feet
+            </p>
+          </div>
+
+          <Input
+            label="Number of Teams"
+            type="number"
+            value={numTeams}
+            onChange={setNumTeams}
+            required
+            placeholder="10"
+          />
+
+          <Input
+            label="Start Date"
+            type="date"
+            value={startDate}
+            onChange={setStartDate}
+            required
+          />
+
+          <Button type="submit" disabled={loading}>
+            {loading ? 'Running Simulation...' : 'Run Simulation'}
+          </Button>
+        </form>
+
+        {loading && <Spinner />}
+
+        {error && (
+          <div className="mt-4 bg-red-50 border border-red-200 rounded-lg p-4">
+            <p className="text-red-800">{error}</p>
+          </div>
+        )}
+
+        {result && (
+          <div className="mt-6 space-y-4">
+            <h2 className="text-xl font-semibold text-green-600">Simulation Complete!</h2>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="bg-blue-50 p-4 rounded-lg">
+                <p className="text-sm text-gray-600">Total Sections</p>
+                <p className="text-2xl font-bold text-blue-600">{result.total_sections}</p>
+              </div>
+              <div className="bg-green-50 p-4 rounded-lg">
+                <p className="text-sm text-gray-600">Total Days</p>
+                <p className="text-2xl font-bold text-green-600">{result.total_days}</p>
+              </div>
+            </div>
+            <Button onClick={() => navigate('results')}>
+              View Detailed Results
+            </Button>
+          </div>
+        )}
+      </Card>
+    </div>
+  )
+}

frontend/src/pages/SimulationResults.jsx

@@ -0,0 +1,82 @@
+import { useState, useEffect } from 'react'
+import Card from '../components/Card'
+import Spinner from '../components/Spinner'
+import { api } from '../utils/api'
+
+export default function SimulationResults({ navigate }) {
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+  const [data, setData] = useState(null)
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        setLoading(true)
+        const result = await api.getOverviewTotal()
+        setData(result)
+      } catch (err) {
+        setError(err.message || 'Failed to load results')
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchData()
+  }, [])
+
+  if (loading) return <Spinner />
+
+  if (error) {
+    return (
+      <div className="max-w-4xl mx-auto">
+        <Card>
+          <div className="text-center py-12">
+            <h2 className="text-2xl font-semibold text-gray-900 mb-4">
+              No Simulation Data
+            </h2>
+            <p className="text-gray-600 mb-6">
+              {error}
+            </p>
+            <button
+              onClick={() => navigate('simulation')}
+              className="text-blue-600 hover:underline"
+            >
+              Run a simulation first
+            </button>
+          </div>
+        </Card>
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-w-6xl mx-auto space-y-6">
+      <h1 className="text-3xl font-bold text-gray-900">Simulation Results</h1>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <Card>
+          <h3 className="text-lg font-semibold mb-2">Total Cost</h3>
+          <p className="text-4xl font-bold text-[var(--color-gold)]">
+            {data.cost} GD
+          </p>
+          <p className="text-sm text-gray-500 mt-2">Gold Dragons</p>
+        </Card>
+
+        <Card>
+          <h3 className="text-lg font-semibold mb-2">Completion Time</h3>
+          <p className="text-4xl font-bold text-blue-600">
+            {data.day || 'N/A'} {data.day === '1' ? 'day' : 'days'}
+          </p>
+          <p className="text-sm text-gray-500 mt-2">Total construction time</p>
+        </Card>
+      </div>
+
+      <Card>
+        <h3 className="text-lg font-semibold mb-4">Construction Overview</h3>
+        <p className="text-gray-600">
+          The simulation has been completed successfully. Total cost for the entire
+          construction project is <strong>{data.cost} Gold Dragons</strong>.
+        </p>
+      </Card>
+    </div>
+  )
+}

frontend/src/utils/api.js

@@ -0,0 +1,60 @@
+const API_BASE = '/api'
+
+class ApiError extends Error {
+  constructor(message, status, data) {
+    super(message)
+    this.status = status
+    this.data = data
+  }
+}
+
+async function request(endpoint, options = {}) {
+  const url = `${API_BASE}${endpoint}`
+
+  const config = {
+    headers: {
+      'Content-Type': 'application/json',
+      ...options.headers
+    },
+    ...options
+  }
+
+  try {
+    const response = await fetch(url, config)
+
+    const data = await response.json()
+
+    if (!response.ok) {
+      throw new ApiError(
+        data.message || 'Request failed',
+        response.status,
+        data
+      )
+    }
+
+    return data
+  } catch (error) {
+    if (error instanceof ApiError) {
+      throw error
+    }
+    throw new ApiError('Network error', 0, { originalError: error })
+  }
+}
+
+export const api = {
+  // Profiles
+  getProfiles: () => request('/profiles/'),
+  getProfile: (id) => request(`/profiles/${id}/`),
+
+  // Simulation
+  runSimulation: (config, numTeams = 10, startDate) => request('/profiles/simulate/', {
+    method: 'POST',
+    body: JSON.stringify({ config, num_teams: numTeams, start_date: startDate })
+  }),
+
+  // Analytics
+  getProfileDays: (id, day) => request(`/profiles/${id}/days/${day}/`),
+  getProfileOverview: (id, day) => request(`/profiles/${id}/overview/${day}/`),
+  getOverviewByDay: (day) => request(`/profiles/overview/${day}/`),
+  getOverviewTotal: () => request('/profiles/overview/')
+}

frontend/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,jsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

frontend/vite.config.js

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8000',
+        changeOrigin: true
+      }
+    }
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: false,
+    minify: 'esbuild',
+    target: 'es2020'
+  }
+})

nginx.conf

@@ -0,0 +1,30 @@
+events {
+  worker_connections 1024;
+}
+
+http {
+  include /etc/nginx/mime.types;
+  default_type application/octet-stream;
+
+  server {
+    listen 7860;
+    server_name _;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # API proxy to Django backend
+    location /api {
+      proxy_pass http://127.0.0.1:8000;
+      proxy_set_header Host $host;
+      proxy_set_header X-Real-IP $remote_addr;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+      proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    # SPA fallback - serve index.html for all routes except /api
+    location / {
+      try_files $uri $uri/ /index.html;
+    }
+  }
+}

pyproject.toml

@@ -13,6 +13,7 @@ dependencies = [
   "djangorestframework==3.16.0",
   "django-filter>=24.3",
   "pydantic>=2.10.6",
+  "gunicorn>=23.0.0",
 ]
 
 [project.optional-dependencies]

uv.lock

@@ -121,6 +121,7 @@ dependencies = [
     { name = "django" },
     { name = "django-filter" },
     { name = "djangorestframework" },
+    { name = "gunicorn" },
     { name = "loguru" },
     { name = "pydantic" },
 ]
@@ -153,6 +154,7 @@ requires-dist = [
     { name = "djangorestframework-stubs", marker = "extra == 'dev'", specifier = "==3.16.4" },
     { name = "factory-boy", marker = "extra == 'test'", specifier = "==3.3.3" },
     { name = "faker", marker = "extra == 'test'", specifier = "==33.3.0" },
+    { name = "gunicorn", specifier = ">=23.0.0" },
     { name = "loguru", specifier = "==0.7.3" },
     { name = "mypy", marker = "extra == 'dev'", specifier = "==1.18.2" },
     { name = "pydantic", specifier = ">=2.10.6" },
@@ -281,6 +283,18 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/d2/7e/553601891ef96f030a1a6cc14d7957fb1c81e394ca89cafccb97e0eb5882/Faker-33.3.0-py3-none-any.whl", hash = "sha256:ae074d9c7ef65817a93b448141a5531a16b2ea2e563dc5774578197c7c84060c", size = 1894526, upload-time = "2025-01-03T21:53:27.711Z" },
 ]
 
+[[package]]
+name = "gunicorn"
+version = "23.0.0"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "packaging" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/34/72/9614c465dc206155d93eff0ca20d42e1e35afc533971379482de953521a4/gunicorn-23.0.0.tar.gz", hash = "sha256:f014447a0101dc57e294f6c18ca6b40227a4c90e9bdb586042628030cba004ec", size = 375031, upload-time = "2024-08-10T20:25:27.378Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/cb/7d/6dac2a6e1eba33ee43f318edbed4ff29151a49b5d37f080aad1e6469bca4/gunicorn-23.0.0-py3-none-any.whl", hash = "sha256:ec400d38950de4dfd418cff8328b2c8faed0edb0d517d3394e457c317908ca4d", size = 85029, upload-time = "2024-08-10T20:25:24.996Z" },
+]
+
 [[package]]
 name = "idna"
 version = "3.11"