Vue Racing Application

This is a web application that demonstrates horse race using Vue.js and TailwindCSS. DEMO

Sections

The application has three different sections:

Racing Track

This section contains eight race tracks. The countdown begins by pressing the "Start Race" button in the Header. When the countdown is over, the race of the horses starts. The speed of the racers changes randomly at random time intervals until the race is over. When the last racer completes the race, the top three ranked racers are displayed.

Leaderboard

In this section, the rankings of the racers live are shown together with their lane numbers.

Racing Lane Settings

This dialog window opens when the settings icon in the Footer is pressed. It has racer name and lane color setting for each race lane. Changed settings are reflected directly on the race track, but are saved in localStorage when the save button is pressed.

Getting Started

To get started you can simply clone this vue-racing repository and install the dependencies.

Clone the vue-racing repository using git:

git clone https://github.com/ilkerdurmaz/vue-racing.git
cd vue-racing

Install dependencies with this command:

npm install

Run the application with this command:

npm run dev

ilkerdurmaz/vue-racing