alexberriman / pong Goto Github PK

Description

Create the general look/feel of the web app. It shouldn't have to connect to any APIs or be functional - it should just be a UI we can build off. For example, we might create a homepage like the following where everything is hardcoded (and we can subsequently connect it all up/build it properly in the future).

Tailwind

Because we're using Tailwind, it's probably us utilising some set of Tailwind UI components (e.g. https://tailwindui.com/)

Inspiration

Some potential inspiration (https://dribbble.com is a good resource). Feel free to use/ignore.

• https://cdn.dribbble.com/userupload/4370066/file/original-43b7645467474d80bcfcd39de5b50b5e.png
• https://cdn.dribbble.com/userupload/4250207/file/original-4bd838561eb495c0df94df668715cc3c.png
• https://cdn.dribbble.com/userupload/5468109/file/original-e54168331b03de99a735f2f08de4859f.png
• https://cdn.dribbble.com/userupload/4262712/file/original-e0ee0af0502d14fbb0c42a9f7308745f.png
• https://cdn.dribbble.com/userupload/4356307/file/original-a97be158ad357e16c95aa39e82e1a522.jpg
• https://cdn.dribbble.com/userupload/4492325/file/original-edc2c6e67f662f2ef5cd808076142413.png
• https://cdn.dribbble.com/userupload/7609556/file/original-d5401ad326d8b6035b5a80a73607810b.png

User Story

Title: Implement UI to View User's Match History

As a Ping Pong Elo application user,
I want to be able to click on a player in the rankings table and view their match history,
So that I can see the sequence of matches they've played, who they played against, the dates, winners, and the change in Elo score.

Acceptance Criteria

1. Given that I am viewing the ranking table,
   When I click on a player's name,
   Then I should be navigated to a separate page displaying that player's match history.

2. Given that I am on a player's match history page,
   When the page is loaded,
   Then it should send a GET request to the Matches API to fetch the match history for the selected player.

3. Given a successful API response,
   When the data is returned,
   Then the page should populate with a list or table of matches played by the user, including the opponent, date, winner, and the Elo score change. The matches should be sorted by date in descending order (most recent first).

Non-Functional Requirements

• The match history UI should be visually consistent with the rest of the application.
• The API call and page rendering should occur within a reasonable timeframe to provide a good user experience.
• The system should handle any API errors gracefully, providing a user-friendly message in case of any issues with fetching the data.

Assumptions

• The Matches API is already built and able to correctly process and respond to GET requests for a user's match history.
• The user match history contains the details of the opponent, date, winner, and the Elo score change.

Out of Scope

• Building the Matches API is out of scope for this story.
• Addition, update, or deletion of match records.

User Story

Title: Create Ranking Table UI and Hook it up to Users/Players API

As a Ping Pong Elo application user,
I want to view a ranking table on the homepage of the website,
So that I can see the rankings of all the players along with their scores at a glance.

Acceptance Criteria

1. Given that I am on the homepage of the website,
   When the page loads,
   Then a ranking table should be displayed, listing all players and their scores.

2. Given the ranking table,
   When it is loaded,
   Then it should successfully send a GET request to the Users/Players API to fetch all users and their scores.

3. Given a successful API response,
   When the data is returned,
   Then the table should populate with the users and their scores in descending order, highest scores at the top.

4. Given the populated ranking table,
   When I view the table,
   Then it should be visually appealing and provide clear information about the players' names and scores.

Non-Functional Requirements

• The ranking table UI should be visually consistent with the rest of the application.
• The API call and table rendering should happen within a reasonable timeframe to maintain a good user experience.
• The system should handle any API errors gracefully, providing a user-friendly message in the event of any issues with fetching the data.

Assumptions

• The Users/Players API is already built and able to correctly process and respond to GET requests for all users and their scores.
• The user score is a reflection of the Elo ranking of the player.

Out of Scope

• Building the Users/Players API is out of scope for this story.
• Adding, updating, or deleting players' profiles or scores.

Notes

• The table component should be "dumb", i.e., it should simply receive and display data without being aware of where the data comes from.
• A separate "smart" component should be responsible for fetching the data from the API and passing it to the table component.

We need to build a basic users API. Right now I don't think we bother with auth, so we don't need these to be users you can log in to, but rather users we show on the rankings table (ClearScore employees).

Whoever takes this, design it all yourself, but some properties we'll need:

• id
• email
• name (or firstName / lastName depending on how granular you want to get it)
• elo (score/rankings)
• createdAt - timestamp on when the user was created
• updatedAt - timestamp on when the user was updated

Some potential properties:

• lastMatch - uuid of last match (from the matches API)
• lastPlayed - timestamp of when they last played
• profilePicture / photo - URL to a profile picture for the user
• matchesPlayed - total amount of matches played
• matchesWon - total amount of matches won
• matchesLost - total amount of matches lost

Routes

We should probably try to have standard routes.

• POST /users - create user
• GET /users/{id} - get user by id
• GET /users - get/search users
• DELETE /users/{id} - delete a user by ID
• PUT /users/{id} - replace user by ID
• PATCH /users/{id} - partially update a user by ID.

Shameless plug here are some thoughts I have on building good APIs: https://github.com/alexberriman/rest-api-design (though I re-read this recently and need to make a few edits).

Database

Its ultimately up to us how we want to build out the database. Feel free to use a database (e.g. postgres), or we can just use the newtondb package in their for a step 1 and implement a proper DB in the future.

Auth

We shouldn't have to bother with auth initially. Given we'll be using it internally, we can just trust everybody without auth and we can implement in the future. I'm thinking in the future we throw in something like auth0 to handle auth.

We need to build a basic matches API. Right now I don't think we bother with auth, so we don't need these to be users you can log in to.

Whoever takes this, design it all yourself, but some properties we'll need:

• id - uuid of the match (auto generated, primary key)
• player1 - uuid of player 1
• player2 - uuid of player 2
• winner - uuid of winner
• createdAt - timestamp on when the result was created (auto generated)
• updatedAt - timestamp on when the result was updated (auto generated)

Routes

We should probably try to have standard routes.

• POST /matches - create match
• GET /matches/{id} - get match by id
• GET /matches - get/search matches
• DELETE /matches/{id} - delete a match by ID
• PUT /matches/{id} - replace match by ID
• PATCH /matches/{id} - partially update a match by ID.

Shameless plug here are some thoughts I have on building good APIs: https://github.com/alexberriman/rest-api-design (though I re-read this recently and need to make a few edits).

Database

Its ultimately up to us how we want to build out the database. Feel free to use a database (e.g. postgres), or we can just use the newtondb package in their for a step 1 and implement a proper DB in the future.

Auth

We shouldn't have to bother with auth initially. Given we'll be using it internally, we can just trust everybody without auth and we can implement in the future. We'll create auth in a separate ticket.

User Story

Title: Build UI for Adding Match Results and Hook it to Matches API

As a Ping Pong Elo application user,
I want to have an intuitive and easy-to-use interface for adding match results,
So that I can update the rankings easily and accurately, and view match history of any player.

Acceptance Criteria

1. Given that I am logged into the application,
   When I choose to report a match result,
   Then a match reporting interface should appear.

2. Given the match reporting interface,
   When I input the names/identifiers of the two players,
   Then the system should validate the players' existence in the current rankings.

3. Given valid players,
   When I input the match outcome,
   Then the system should validate the input (e.g. ensuring it's in the appropriate format and aligns with the possible outcomes).

4. Given valid match outcome,
   When I submit the result,
   Then the system should successfully send a POST request to the matches API, and receive a successful response (HTTP 200 OK or similar).

5. Given a successful API response,
   When I view the player profiles involved in the match,
   Then I should see the match outcome reflected in their match histories and the Elo ranking table should be updated accordingly.

Non-Functional Requirements

• The match reporting interface should be user-friendly and visually consistent with the rest of the application.
• The match reporting process should not take more than 2 minutes on average internet speed.
• The system should handle erroneous or invalid data inputs gracefully, providing helpful error messages to the user.

Assumptions

• The matches API is already built and able to correctly process and respond to POST requests for match results.

Out of Scope

• Building the Matches API is out of scope for this story.
• Creation or deletion of player profiles.