Welcome back! So far, you’ve learned how to score word guesses using semantic similarity and set up a leaderboard. Now, it’s time to connect all these features together so your game can interact with players through the web.

In this lesson, you’ll learn how to create the main routes (or endpoints) in Express.js that allow your frontend to communicate with your backend. These routes will let players get the daily prompt, submit their guesses, and see the leaderboard. By the end of this lesson, you’ll understand how each route works and how they power your word prediction game.

Before we dive in, let’s quickly remind ourselves about Express routers and how they help organize your project.

In Express.js, you can use express.Router() to organize your routes into modular files. This is similar to how other frameworks use blueprints or modules. By grouping related routes together, your codebase stays clean and easy to manage as your app grows.

For example, in your project, you might see something like this in a file called routes.js:

This creates a router object. All the routes for your game will be registered on this router, keeping things tidy and modular. In your main server file (like main.js), you can then mount these routes:

Let’s start by creating the route that sends the daily game data to the frontend. This is the /game route.

First, we define a new route using our router. We want this route to respond to GET requests.

Here, router.get('/game', ...) tells Express to call the provided function whenever someone visits /game with a GET request.

Inside the function, we need to get today’s prompt. This is usually an object with the system prompt, user question, and the LLM model to use.

The getDailyPrompt() function (defined elsewhere in your project) returns the prompt for today’s game.

Next, we want to get the list of words that the LLM (Large Language Model) would generate in response to the prompt.

Here, getLlmResponseWords takes the system prompt, user question, and model name, and returns a list of words generated by the LLM.

Finally, we return all this information as a JSON response. This allows the frontend to use the data to build the game interface.

• res.json sends a JSON response to the client.
• The response includes the prompt, the list of words, and any breakpoints (special markers for the game).

Example Output:

This output gives the frontend everything it needs to display the game for today.

Now, let’s create the route that lets players submit their guesses and get a score.

We want this route to accept POST requests, since the player is sending data to the server.

Inside the function, we get the data sent by the player. This is usually in JSON format.

• req.body gets the JSON data sent in the request.
• We extract the player’s guess and the correct word.

Now, we use the scoreGuess function to compare the guess to the correct word and calculate a similarity score.

This function returns a score (for example, between 0 and 100) based on how close the guess is to the correct answer.

Finally, we return the score as a JSON response.

Example Request:

Example Response:

This allows the frontend to show the player how close their guess was.

Let’s finish by looking at how players submit their total score and how the leaderboard is displayed.

Players send their names and scores to the server using the /submit_score route.

• The function checks that both name and score are provided.
• If either is missing, it returns an error with status code 400.
• Otherwise, it saves the score using the submitScore function and returns a success message.

Example Request:

Example Response:

The /leaderboard route lets anyone see the top scores for today.

• This function calls getLeaderboard() to get the list of top scores.
• It returns the scores as a JSON response.

Example Output:

This allows the frontend to display the current leaderboard to all players.

In this lesson, you learned how to create the main routes that connect your Express.js backend to the game’s frontend. You saw how to:

• Send the daily prompt and LLM-generated words to the frontend with /game
• Receive and score player guesses with /submit_guess
• Submit player scores and display the leaderboard with /submit_score and /leaderboard

These routes are the backbone of your word prediction game, allowing players to interact with your app in real time. Up next, you’ll get hands-on practice building and testing these routes yourself. This will help you solidify your understanding and prepare you to add even more features to your game. Good luck!