Skip to content

A cool lab exercise to practice Backend and Frontend development

Jump to bottom
DavS edited this page Aug 11, 2023 · 1 revision

Games Catalogue

You are tasked with creating a REST API using Node.js and Express.js for a games catalogue application. The API should have various endpoints to perform CRUD operations on games list. Additionally, you need to create a frontend interface using HTML, CSS, JavaScript, and Bootstrap to consume these APIs.

Game Model

Game Model

1. Backend Requirements:

1.1 - Create api-docs using Swagger for the following REST endpoints and Implement these REST endpoints in Node.js and Express.js.

Note: You will first create your swagger file and then you will start implementing those endpoints. Swagger helps you document your API requirements so everyone in your team is on the same page. This also helps you test your endpoints.

  1. GET /api/games : This endpoint should return a list of all games in the game-store.

  2. GET /api/games/:id : This endpoint should retrieve a specific game by its ID.

  3. GET /api/games?publisher=:publisher : This endpoint should retrieve games by a specific publisher.

  4. GET /api/games?genre=:genre : This endpoint should retrieve games of a specific genre.

  5. GET /api/games?title=:title : This endpoint should retrieve games matching the title(s) using the keyword search.

  6. POST /api/games : This endpoint should add a new game to the games list.

  7. PUT /api/games/:id : This endpoint should update the details of a specific games.

  8. DELETE /api/games/:id : This endpoint should delete a specific game.

1.2 - Instructions for Backend API:

  • Set up a new Node.js project for your backend API application and install the necessary dependencies, including Express.js.

  • npm i express

  • npm i swagger-ui-express

  • npm i cors

  • npm i -D nodemon

  • Create a server.js file to define the Express server, and register the relevant middlewares.

  • Setup your swagger.json file with all the required endpoints/specifications and access it in your browser using http://localhost:3000/api-docs to see all the endpoints before you start implementing any endpoints.

  • Implement the REST API endpoints mentioned above (Use the MVC pattern), including the necessary routes, controller(s), model(s), and data storage (e.g. Use an array for data storage for now).

  • Hint: You can create a GamesRepository class that has a games array as a data member and allows to get and add elements to this games array.

2. Frontend Requirements:

2.1 - Create a frontend interface using HTML, CSS, JavaScript and Bootstrap to consume the APIs. The frontend should have the following functionality:

  1. Fetch all the games from /api/games endpoint (use fetch or axios) and display the list of all games (in tiles) on an html page. Preferably, create a template for the game tile, and reuse that in your code.
  2. Ensure the frontend communicates with the backend APIs using asynchronous requests.
  3. Implement search functionality (a search box) to search games by title.
  4. Implement filtering functionality to filter games by publisher and genre using the appropriate endpoints.
  5. Provide a form to add a new game using the POST /api/games endpoint.

2.2 - Instructions for Frontend:

  • Create a public directory in the same project (if not already there) and add the following html & css files in the public directory.
  • Create an index.html file to build the frontend interface.
  • Use CSS, Bootstrap to style the page and make it visually appealing.
  • Write a separate stylesheet e.g. games-catalogue.css if you are writing any custom css for your games catalogue.
  • Write JavaScript code in a separate files e.g.
  • games-ui-script.js to manipulate DOM to display the retrieved data and interact with the user
  • games-client.js to handle API requests. Create a javascript class (e.g. GamesService) and write seperate methods in that class to make API calls as per the frontend data requirements.

2.3 - Sample Frontend design:

Sample Frontend design and filters

3. Instructions for Testing:

Test the application by running the backend server and accessing the frontend interface through a web browser. Verify that the API endpoints work correctly and the frontend interface can consume the data and perform the desired actions.

Note: You can use any additional libraries or frameworks to assist with the development process if needed.

Remember to structure your code neatly (give some good names to your functions & variables), add comments where necessary, and try your best to implement the error handling in your backend and frontend. Good luck!

4. Publish your code to your github repository

5. References

Clone this wiki locally