Workshops ... Appendix: file inventory
Q&A: common questions

Appendix: file inventory

The final project layout, for orientation. This is what you'll have built by the end of the workshop.

snake-arena-online/
├── frontend/                  # the Lovable React app
│   ├── src/
│   │   ├── pages/             # Index (game), Leaderboard, Spectate, Login, Signup
│   │   ├── services/          # api.ts, mockApi.ts, types.ts
│   │   ├── contexts/          # AuthContext
│   │   ├── components/        # GameBoard, Navigation, ...
│   │   └── config.ts          # backend URL (VITE_API_BASE_URL)
│   └── package.json
├── backend/                   # the FastAPI app
│   ├── app/
│   │   ├── main.py            # FastAPI app, CORS, routers, static frontend
│   │   ├── routers/           # auth.py, leaderboard.py, games.py
│   │   ├── models.py          # Pydantic request/response models
│   │   ├── db_models.py       # SQLAlchemy ORM models
│   │   ├── database.py        # engine, sessions, queries
│   │   ├── config.py          # DATABASE_URL selection
│   │   └── auth.py            # password hashing + JWT
│   ├── tests/                 # unit tests (in-memory SQLite)
│   ├── tests_integration/     # integration tests (file-based SQLite)
│   ├── Dockerfile             # combined frontend + backend image
│   └── pyproject.toml
├── AGENTS.md                  # uv house rules for the assistant
├── openapi.yaml               # the frontend-backend API spec
├── docker-compose.yml         # app + Postgres
├── cloudformation.yaml        # AWS deployment (added in Part 11)
├── .env.example               # environment template
├── Makefile                   # install / dev / test / up / down
└── .github/workflows/ci-cd.yml

A few notes on files whose role isn't obvious from the name:

  • frontend/services/mockApi.ts is the in-memory fake backend that lets the frontend run on its own before the real backend exists. We keep it after switching to the real client in Part 5: Connect frontend and backend.
  • backend/app/config.py is where the SQLite-or-Postgres decision lives, driven by DATABASE_URL.
  • backend/Dockerfile is the combined image: it builds the frontend in a Node stage and copies the result into the Python image, so one container serves both.
  • cloudformation.yaml is the infrastructure as code for the AWS deployment. We write it in Part 11: Deploy to AWS with infrastructure as code.
Q&A: common questions

Questions & Answers

Sign up to ask questions, track your progress, and get access to other workshops · Already have an account? Sign in