F1FrontEnd

A web application to do bets with your friends about F1 race results!
Report Bug · Request Feature

📋 Table of contents

• ℹ️ About The Project
  • 🚧 Built With
• 🔨 Getting Started
  • ⚠ Prerequisites
  • 🤖 .env file
  • 🚢 Running using Docker
  • 🏡 Running development server
  • 🏗️ Building the app
• 🚀 Usage
• 📜 License

ℹ️ About The Project

A web application to do bets with your friends about F1 race results!

This is the front-end used to interact with F1Betting.

(back to top)

🚧 Built With

• 
• 
• 
• 
• 

(back to top)

🔨 Getting Started

Below are the instructions for running the app for development and general usage.

⚠ Prerequisites

• F1API must be running
• F1Betting must be running
• A Google Cloud project with OAuth2 credentials configured

🤖 .env file

This project requires a .env file. Below is a template of the values it should contain.

# Google client ID
VITE_CLIENT_ID=

# URL to F1Betting (https://github.com/f1betting/F1Betting)
VITE_BETTING_API_URL=

# URL to F1API (https://github.com/f1betting/F1API)
VITE_F1_API_URL=

# SERVER SETTINGS
HOST=0.0.0.0
PORT=5173

# DEV | PROD
MODE=DEV

🚢 Running using Docker

Running the app using Docker requires a .env.prod file. The server settings should be set to

# SERVER SETTINGS
HOST=0.0.0.0
PORT=5173

# DEV | PROD
MODE=PROD

1. Build docker image using:

   $ docker build . -t f1frontend

2. Run container using:

   $ docker run -p 80:80 f1frontend

🏡 Running development server

Running the app using the development server requires a .env file. The server settings should be set to

# SERVER SETTINGS
HOST=0.0.0.0
PORT=5173

# DEV | PROD
MODE=DEV

1. Install dependencies with yarn using:

   $ yarn install

2. Run development server using:

   $ yarn dev --host

The server will be running on port 5173

🏗️ Building the app

1. Install dependencies with yarn using:

   $ yarn install

2. Build app using:

   $ yarn build

(back to top)

🚀 Usage

If running development server, it will be running on port 5173

Upon loading the app you will be prompted to log-in using Google.

Once you've signed in, the app will take you to the main screen. Here you can place bets, edit bets and delete bets. You can also see the results for the previous race and view the standings per season.

To place a bet, click on one of the rectangles and start typing the driver abbreviation. They will be auto-completed as you continue to type.

(back to top)

📜 License

Distributed under the MIT License. See LICENSE.md for more information.

(back to top)