Captrivia Frontend Application

Overview

The is a real-time multiplayer Trivia game about cap tables with a retro gaming theme. Users can create or join games in the server, compete to answer questions first, and see real-time updates on a scoreboard and leaderboard. The frontend is developed using React and TypeScript, while the backend uses WebSockets for real-time communication. Please refer to './DECISIONS.md' for more information on development approach and decisions.

Features

• Effortless Connection to Server: Establish a WebSocket connection to the server with a username.
• Create Game: Allows users to create new game sessions.
• Join Game: Users can join an existing game available in the Lobby.
• Compete in Real-Time: Answer questions in real-time with synchronized view for multiplayers.
• Displayed Timer: Show timer to countdown until correct answer is selected or when all players selected an answer.
• Scoreboard: Display player scores at the end of the game.
• Leaderboard: Display best scores of players sorted by accuracy and average time.

Synchronized View for Multiplayer

Retro Gaming Theme with Responsive Design

Application Structure

/trivia-fe
│ /src
│ ├── /assets
│ │ └── bg.svg
│ ├── /components
│ │ ├── /ConnectModal
│ │ │ ├── ConnectModal.tsx
│ │ │ └── ConnectModal.scss
│ │ ├── /GameRoom
│ │ │ ├── GameRoom.tsx
│ │ │ └── GameRoom.scss
│ │ ├── /Leaderboard
│ │ │ ├── Leaderboard.tsx
│ │ │ └── Leaderboard.scss
│ │ ├── /Lobby
│ │ │ ├── Lobby.tsx
│ │ │ └── Lobby.scss
│ │ ├── /ScoreBoard
│ │ │ ├── ScoreBoard.tsx
│ │ │ └── ScoreBoard.scss
│ │ ├── /TransitionMessage
│ │ │ ├── TransitionMessage.tsx
│ │ │ └── TransitionMessage.scss
│ │ └── /WaitingRoom
│ │ │ ├── WaitingRoom.tsx
│ │ │ └── WaitingRoom.scss
│ ├── /services
│ │ ├── api.ts
│ │ └── webSocketService.ts
│ ├── /styles
│ │ ├── _global.scss
│ ├── App.tsx
│ ├── index.css
│ └── interfaces.ts
│ Decisions.md
│ Dockerfile
│ index.html
│ README.md