https://github.com/dimslaev/table-tennis

Coding challenge: create a fullstack app with React and Supabase.
https://github.com/dimslaev/table-tennis

radix-ui react react-query supabase typescript zod

Last synced: 13 days ago
JSON representation

Coding challenge: create a fullstack app with React and Supabase.

• Host: GitHub
• URL: https://github.com/dimslaev/table-tennis
• Owner: dimslaev
• License: mit
• Created: 2024-04-02T20:25:41.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-08-29T20:35:43.000Z (3 months ago)
• Last Synced: 2024-08-29T23:00:06.271Z (3 months ago)
• Topics: radix-ui, react, react-query, supabase, typescript, zod
• Language: TypeScript
• Homepage: https://ds-table-tennis.netlify.app/
• Size: 109 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Table Tennis - Coding Challenge

Test the ability to develop a full-stack application with intuitive user interface and relational database management using React and Supabase.

## Background

Your friends are table tennis addicts. Unfortunately, they are also extremely bad at keeping score, which results in endless disputes about who is the table tennis champion. To resolve the situation once and for all, you decide to write a simple program that keeps track of the score during the game, stores the final result after the game ends, and displays some statistics.

## User stories

**US#1**: As a user, I want to start a new game between two players so that I can keep track of the score as the game is being played.

**US#2**: As a user, I want to create a game that has already been played so that I can enter the result of that game.

**US#3**: As a user, I want to be able to create player profiles so that I can reuse them when I create new games.

**US#4**: As a user, I want to see a dashboard with individual player statistics so that I can see who is the ultimate champion.

## Example Interface

#### New Game Screen:

- Select Player 1

- Select Player 2

- Start Game (with score tracking interface)

#### Existing Game Entry Screen:

- Select Player 1

- Select Player 2

- Enter Final Scores

- Save Game

#### Player Management Screen:

- Create New Player

- List of Existing Players (with edit options)

#### Statistics Dashboard:

- List of Players with their statistics

- Highlight the current champion

## Additional requirerments

- Use TypeScript to enforce type safety in the React components and API interactions.

- Ensure efficient data fetching and error handling.

- Implement form validation on the front-end.

- Create a consistent design using a CSS framework of your choice.

- Include unit tests for key components and functionalities.