Django with React project structure

Django with React project structure

Explorer

  • .git…
  • .gitignore
  • README.md
  • backend
  • .venv…, not committed
  • pyproject.toml
  • uv.lock
  • manage.py
  • db.sqlite3, not committed
  • schema.ymlnew
  • conftest.pynew
  • .envnew, not committed
  • .env.examplenew
  • frontend
  • node_modules…, not committed
  • dist…new, not committed
  • .gitignore
  • .oxlintrc.json
  • README.md
  • index.html
  • package.json
  • package-lock.json
  • tsconfig.json
  • tsconfig.app.json
  • tsconfig.node.json
  • vite.config.ts
  • Makefilenew
  • compose.yamlnew
  • .editorconfignew
  • .pre-commit-config.yamlnew
  • shop.code-workspacenew

  1. # Create the repository

    mkdir shop && cd shop && git init

  2. # Create the backend project with uv and Django

    uv init --bare backend && cd backend && uv add django djangorestframework && uv run django-admin startproject config .

  3. # Create the user and orders apps before the first migrate

    uv run python manage.py startapp accounts && uv run python manage.py startapp orders

  4. # Create the frontend from the official React TypeScript template

    cd .. && npm create vite@latest frontend -- --template react-ts && cd frontend && npm install

  5. # Add the backend pieces that connect the halves

    cd ../backend && uv add drf-spectacular django-environ "psycopg[binary]" whitenoise gunicorn

  6. # Add the frontend API client, data fetching and routing

    cd ../frontend && npm install openapi-fetch @tanstack/react-query react-router && npm install -D openapi-typescript

  7. # Run both: Django on 8000, Vite on 5173 (open 5173)

    make -j2 dev