https://github.com/makstashkevich/post-battle-screen-design

Post-battle Screen Design on React.js
https://github.com/makstashkevich/post-battle-screen-design

Last synced: 17 days ago
JSON representation

Post-battle Screen Design on React.js

• Host: GitHub
• URL: https://github.com/makstashkevich/post-battle-screen-design
• Owner: MakStashkevich
• Created: 2023-02-17T11:40:08.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-12-12T09:55:56.000Z (22 days ago)
• Last Synced: 2024-12-12T10:31:51.575Z (22 days ago)
• Language: TypeScript
• Size: 8.45 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Post-battle Screen Design

### Introduction

You need to design and implement a functional post-battle screen for a session based game.

### Main Task

There are two teams, the winning team and loser team. Each team consists of 50 players.

The teams should be organized side by side. 

Each player has a nickname and scores and can be in two states, dead or alive. 

Also, there should be a tooltip with additional player info (total kills and deaths) and a button to send a friend request.

### Additional Task (Optional)

Implement a dummy backend for the task using any of REST/graphQL/GRPC.

## My solution

![Solution photo](./images/screenshoot.png)

It was decided to use the scoreboard (table) for a more comfortable user experience (UX) with the ability to scroll through the list of players of each team.

### Figma Design Concept

[See Figma Project](https://www.figma.com/file/NtSeuqvFEkkqwD5OYyEStB/Post-battle-screen?node-id=0%3A1&t=05zFtkKufIoTPmdm-1)

### Demo

![Solution photo](./images/demo.gif)

[See Demo Site](https://makstashkevich.com/post-battle-screen/demo/)

[See Demo API](https://makstashkevich.com/post-battle-screen/api/)

## How to install project

### Download project to local machine

`git clone && cd ./post-battle-screen-design`

### Developing frontend UI

> **Warning:** You need install `yarn` on you local machine.

Run this command on root folder for build frontend: 

`cd frontend && yarn start`

### Developing backend API

> **Warning:** You need install `python3.10` on you local machine.

Run this command on root folder: 

`cd api && pip3 install -r requirements.txt && sudo chmod +x start-local.sh && sudo ./start-local.sh`

## Build Docker for production

Before use Docker on dedicate server you need run this command:

`sudo chmod +x install_docker_engine.sh && sudo ./install_docker_engine.sh`

Run command on root folder to auto-install & auto-build Docker compose: 

`sudo chmod +x build.sh && sudo ./build.sh`

For delete all run containers force, run script with `-f` argument:

`sudo ./build.sh -f`