Part 2: Run and test the frontend

In Part 1: Frontend with Lovable we built and explored the Snake frontend inside Lovable. It's a Vite + React + TypeScript project running on a mock backend. Now we get the code onto our own machine and run it there. We also look at the tests Lovable wrote, so we know what "working" means for this app.

Get the code onto your machine

Connect Lovable to your GitHub account and let it create a repository for the project. This is how the code leaves Lovable and ends up somewhere you can clone, run, and later attach a backend and a CI/CD pipeline to.

In Lovable, use the GitHub option to create the repo, then clone it:

git clone https://github.com/<your-username>/<your-repo>.git
cd <your-repo>

Run it locally

Install the dependencies and start the dev server from the project root:

npm install
npm run dev

Vite prints a local URL, usually http://localhost:5173. Open it and you have the full app, where everything you'd expect works.

The app lets you do all of this:

• play the game in both modes
• submit a score
• open the leaderboard
• sign up
• watch the spectate page

All of this runs against mockApi.ts, the in-memory fake backend, so there's no server involved yet. The mock exists so the frontend stays usable and demoable on its own.

Run the tests

Lovable generated tests with Vitest, so run them once:

npm test

The tests cover the game logic and the services layer.

Two of them matter most:

• src/services/mockApi.test.ts checks the fake backend behaves: signup rejects duplicate emails, and the leaderboard sorts by score.
• src/services/api.test.ts checks the real client builds the right requests against a mocked fetch.

That second file defines the API spec the backend will have to satisfy. It already encodes which endpoints get called and what they return.

These tests run again in Part 12: CI/CD with GitHub Actions on every push, so a frontend change that breaks the agreed API fails CI before it ships.

Make room for the backend

Right now the React app sits at the repo root. We're about to add a Python backend, and two apps at the root would collide.

Move the frontend into its own folder so the backend gets its own next to it:

mkdir frontend
git mv -k * .* frontend/

The -k flag tells git mv to skip what it can't move, like .git and the new frontend folder. That way one command relocates the rest and keeps the history.

After this the repo looks like:

.
├── frontend/      # the Lovable app (package.json, src/, ...)
└── .git/

From here, every frontend command runs inside frontend/, and the backend goes in backend/ in Part 4: FastAPI backend from the spec. First, though, we fix the API spec between them by writing an OpenAPI spec in Part 3: OpenAPI spec from the frontend.