Member Contribution Report Tuluyhan Sözen - bounswe/bounswe2023group7 GitHub Wiki

Important Issues Related to the Practice Application

  • #217: Creating a Remote Database for Backend of the Practice App
  • #219: Explaining Streaming Games for Project Report
  • #220: Creating Unit Test for Streaming Games API
  • #221: Creating Game Model for Streaming Games
  • #222: Creating Route file for Streaming Games
  • #223: Creating Controller of Streaming Games
  • #229: Creating Member Contribution Report

Third-Party URIs

I utilized the Twitch API, which is a RESTful API provided by Twitch.tv, a popular live streaming platform for video games, music, and other creative content. The Twitch API allows developers to access various types of data, such as live and recorded streams, user information, and game metadata. The Twitch API is used in this code to retrieve information about the most viewed games on Twitch.

API Functions

I have created three functions, including two GET requests and one POST request. These functions are as follows:

  • getMostViewedGame - GET: This function retrieves information about the top 10 most viewed games on Twitch at the moment and returns the name and ID of the most viewed game in the response. The route used for this function is /api/streaming-games/most-viewed.

  • saveMostViewedGame - POST: This function also retrieves information about the top 10 most viewed games on Twitch, but it saves the name and ID of the most viewed game along with the current date and time in a MongoDB database using the Game model. It then returns the saved Game object in the response.The route used for this function is /api/streaming-games/most-viewed.

  • getSavedGames - GET: function retrieves all the Game objects from the MongoDB database and returns their name, id, and date fields in the response. These functions allow for managing location-related data, retrieving location history, adding new location entries to the database, and finding location information based on an IP address. The route used for this function is /api/streaming-games/history-most-viewed.

Unit Tests

I created 3 tests: 1 for getMostViewedGame, 1 for saveMostViewedGame, and 1 for getSavedGames.

  • getMostViewedGame:

The first test is for the GET /api/streaming-games/most-viewed endpoint, which should return the most viewed game on Twitch. The test makes a request to this endpoint using the supertest library and checks that the response status code is 200, and that the response body contains the properties name and id.

  • saveMostViewedGame:

The second test is for the POST /api/streaming-games/most-viewed endpoint, which should save the most viewed game on Twitch. The test makes a request to this endpoint using the supertest library and checks that the response status code is 201, and that the response body contains the properties _id, name, id, and date.

  • getSavedGames:

The third test is for the GET /api/streaming-games/history-most-viewed endpoint, which should return all saved games. The test makes a request to this endpoint using the supertest library and checks that the response status code is 200 and that the response body is an array.

Sample Calls

Fonctions do not have parameters. I'm using Swagger to display requests and responses (JSON, headers, status code).

  • /getMostViewedGame successful call
  • /saveMostViewedGame successful call
  • getSavedGames successful call

Frontend

The application consists of three buttons: "Get Most Viewed Game", "Save Most Viewed Game", and "Get Saved Games".Clicking on the "Get Most Viewed Game" button sends a GET request to the backend API to retrieve the most viewed game. The response is displayed in a div with class "game-info". Clicking on the "Save Most Viewed Game" button sends a POST request to the backend API to save the most viewed game. The response message is displayed in a div with class "response-message". Clicking on the "Get Saved Games" button sends a GET request to the backend API to retrieve the list of saved games. The list is displayed in a div with class "saved-games-list". The frontend application is designed to be responsive and user-friendly, with styled buttons and game information displayed in a visually appealing format. It uses React hooks such as useState to manage state within the components and axios library to make HTTP requests to the backend API. The CSS styles are defined in a separate "style.css" file.

Other Significant Work

I reviewed my friends' issues and attended meetings.

Challenges

Due to my lack of experience with Node.js and frontend development, I faced significant challenges while completing the assignment and ended up spending an excessive amount of time on relatively straightforward tasks.