Part 1: Frontend with Lovable

We start with the frontend, because the frontend defines what the app does. Once we can see the screens and click around, the backend's job is obvious: it has to answer the calls the frontend already makes. We build the frontend with Lovable, which generates a full React app from a prompt and shows it running as you go.

Generate the app

Open Lovable and describe the app you want in one prompt. We ask for everything a multiplayer game needs, including a leaderboard, spectating, and login. We keep the whole thing on a mock backend. We have no backend yet, and we want the frontend to run on its own so we can play with it before we build one.

Use this prompt:

Create an interactive Snake game with two modes: walls (you die hitting a
wall) and pass-through (you wrap around the edges). Make it multiplayer-ready:
a leaderboard showing top scores per mode, a page to watch other players'
active games, and login and signup screens.

Centralize every backend call in one services layer, and ship a mock
implementation of it so the whole app runs without a real backend. Add tests.

Lovable builds the app live. You can play the game, open the leaderboard, and sign up against the mock data right in the preview. Iterate in plain language if something looks off: "make the game board bigger", "the leaderboard should sort by score descending". Each message regenerates the relevant part.

The generated project

You now have a standard Vite + React + TypeScript project, styled with Tailwind.

The pieces that matter for the rest of the workshop live in src:

src/
├── pages/          # Index (game), Leaderboard, Spectate, Login, Signup
├── services/       # the single place every backend call lives
│   ├── types.ts    # User, LeaderboardEntry, ActiveGame, request/response shapes
│   ├── api.ts      # the real backend client (talks to /api/*)
│   └── mockApi.ts  # in-memory fake backend, so the app runs with no server
├── contexts/       # AuthContext: who is logged in
└── config.ts       # where the backend lives

The design we asked for matters later: every backend call goes through services. For now mockApi.ts simulates a real backend, so the app runs on its own today. We swap in the real client once the backend exists.

Next we get the code onto our machine and run it in Part 2: Run and test the frontend.