Part 1: Frontend with Lovable

We start with the frontend so we can see the screens and click through the game before writing backend code. From that UI, we list the game states, API calls, and data the backend has to support.

We build the frontend with Lovable, which generates a full React app from a single prompt.

I chose Lovable because I like the interfaces it creates, but you don't have to use it. Replit, v0, or any alternative works, and you can replace it entirely with a coding assistant such as Codex or Claude Code.

Generate the app

Open Lovable and describe the app you want in one prompt. Try to put everything in one detailed prompt, because you'll not get a chance to correct it on a free account. Aim to get the first version in one shot, or two at most.

It also helps to talk to ChatGPT or another AI tool first. It will help you understand what you want to build and it will make a more precise prompt.

If we run out of free credits, it's not a big deal. We can wait a day for them to reset, or switch to a coding assistant to finish what Lovable started.

I already worked out the requirements, so we ask for the Snake game with multi-user support. That means a leaderboard, spectating, and login. We also ask for a mock backend up front, so replacing it with the real one later is easier.

Use this prompt:

Create an interactive Snake game with two modes:

- walls (you die hitting a wall)
- pass-through (you wrap around the edges)

Make it multi-user. Add

- a leaderboard showing top scores per mode
- a page to watch other players' active games
- login and signup screens

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

Add tests.

This prompt is quite specific.

With a prompt like that, AI usually builds something decent that works on the first attempt. You can play the game, open the leaderboard, and sign up against the mock data right in the preview.

How far you iterate depends on how many credits you have left. If something looks off, nudge it: "make the game board bigger", or "the leaderboard should sort by score descending". If you run out of credits, you can also do it later when we extract this code and run it locally.

The generated project

You now have a TanStack Start project, the full-stack React framework Lovable scaffolds from.

It pairs TanStack Router for pages (one file per route under routes/) with React, Tailwind, and TypeScript, built with Vite.

All the code is in src.

For us, we're especially interested in the services part:

src/
├── routes/         # index (home), play, leaderboard, watch, auth — one file per page
├── services/       # the single place every backend call lives
│   ├── index.ts    # the entrypoint: picks the mock or the real backend
│   ├── mock.ts     # in-memory fake backend, so the app runs with no server
│   ├── http.ts     # the real backend client (talks to the FastAPI app)
│   └── types.ts    # User, LeaderboardEntry, ActiveGame, request/response shapes
├── hooks/          # useAuth: who is logged in
└── components/     # SnakeBoard and the UI components

The generated mock.ts simulates a real backend, and services/index.ts chooses that mock for now. Later we'll switch that entrypoint to the real HTTP client.

But next we'll set up a place to work on the code in Part 2: Development environment.