Game 21 Front-End Project

Our project involved creating a React front-end application that provides a user-friendly interface for one of the server-side APIs developed by another backend group during week 6 of the bootcamp.

This project was bootstrapped with Create React App.

Diagrams

WireFrame Diagram

Component Diagram

Tech Stack

• JavaScript
• HTML
• CSS
• React.js (+ React Router Dom and Multiselect library

Set Up Instructions

Server Side API instructions

The server side api can be found here: https://github.com/thibyaa/Backend_TwentyOne_API

• Software needed to run the API:

  • IntelliJ and Java (version 17)
  • Postman
  • Postico
  • PostgreSQL

• Installation instructions:

  • Git clone from the server side API Repo
  • Create an SQL database and name it Backend_TwentyOne_API so that it matches with the name in the application.properties file (src of server side API)
  • Once your database has been created, run the BackendTwentyOneApiApplication.java file in IntelliJ to get started.
  • You can set up your tests using Postman on localhost:8080/{extension} or type in localhost:8080/games in your browser, for example, to see the games data. More details can be found from the backend repo

Client-side Instructions (Fiona)

Routes

To navigate between pages on the React app, we configured the following routes using the React Router:

1. Landing Page: http://localhost:3000

2. LogIn Page: http://localhost:3000/logIn

3. Single Player Page: http://localhost:3000/singlePlayer

4. Multiplayer Page: http://localhost:3000/multiPlayer

5. Game Page: http://localhost:3000/gamePage

Note: Depending on what game mode is selected, you will be taken to a single or multiplayer game page.

Future

1. Log In Container to be turned into change into a modal (additional library)
2. Players to be able to choose avatars
3. Deployment of website

Collaborators

• Zaynah Sadiq (https://github.com/Zaynah99)
• Stella Annor (https://github.com/StellaA30)
• Fiona Eshun (https://github.com/Fiona2223)
• Thibyaa Mahasivam (https://github.com/thibyaa)