Assignment 08: Interactive World Server

In this project, you’ll build a small web app that serves and updates information about your world.json file (from the previous assignment) through an Express.js server. Your front end will fetch and display data from the server, allow user interaction, and send updates back to the backend. The server will evolve or update the “world” based on user input and respond with the new state.

You will host your project as a "Web Service" on render.com (using the free hobby tier).

Project Structure

08-server-world/
│
├── public/
│   ├── index.html
│   └── script.js
│
├── world.json
└── server.js

Display and Update World Data

In week 1 you will first set up your project and display data from your world.json file on the front end through an Express server. Next, you will create a way for users to make a simple update to that world (for example, adding a person, changing an item, or modifying a number).

Requirements

• Create a server.js file that:
  • Serves static files from the public directory.
  • Has a GET /world route that sends the contents of world.json from the server.
  • Has a POST /update route that reads the existing world.json, modifies it based on the client request, writes it back to disk, and sends the updated data as the response.
• In your front end (index.html and script.js):
  • Fetch /world on load and display the world information dynamically (i.e. generate HTML code for the data).
  • Provide at least one input and button that lets the user make a change to the world (for example: add a person, change an item a person carries, or add a new town, etc.). The input should make use of a form and the FormData pattern to create a JSON object from the inputs.
  • When the user submits the form, use fetch('/update', { method: 'POST', ... }) to send the new information.

Deploying your project and submitting your work

Host your project as a "Web Service" on render.com (using the free hobby tier). The best way to do this is to register to render.com using your github account, and then to give render access to the class respository. Once you have depoyed your project render.com will give you a link to your project. Post that link next to your name in the spreadsheet sent to you via email.

🖥️ Example Code

• Here is a link to a project. Look at this to understand the project structure.
• Here's example server code
• Here's the front end script