Part 3: Run and test the frontend
In Part 2: Development environment we got the code out of Lovable and set up our tools. Now we can run that frontend.
Run it locally
Because Lovable uses a template for all its projects, we don't need a lot of setup to run it.
Install the dependencies and start the dev server:
npm install
npm run dev
The dev server prints a local URL, which runs on
http://localhost:8080. Open it and you have the full app, where everything
you'd expect works.
Now you can:
- play the game in both modes
- submit a score
- open the leaderboard
- sign up
- watch the spectate page
These screens run against mock.ts, the in-memory fake backend in
services/index.ts, so there's no server involved yet.
Run the tests
Since we asked for tests, Lovable generated them, and it used Vitest.
Run them:
npm test
If Lovable didn't generate any tests, let's set them up.
Ask the assistant:
Set up Vitest for this project and write tests for the game logic and the
services layer against the mock backend. Add a "test" script to package.json.
We use these tests for the rest of the workshop to catch changes that break existing behavior.
Make room for the backend
Right now the React app sits at the repo root. We're about to add a Python backend. If React and FastAPI both live at the repo root, their package files, commands, and generated folders compete for the same directory.
Move the frontend into its own folder so the backend gets its own next to it:
mkdir frontend
git mv * frontend/
After this the repo looks like:
.
├── frontend/ # the Lovable app (package.json, src/, ...)
└── .git/
Commit at the end of every step, so you always have a working commit to roll back to.
Make the first commit now:
git add .
git commit -m "Set up frontend and project structure"
From here, every frontend command runs inside frontend/, and the backend goes
in backend/ in Part 5: FastAPI backend from the spec.
First, though, we fix the API spec between them by writing an OpenAPI spec in
Part 4: OpenAPI spec from the frontend.