Installation

Prerequisites

Before installing F1 PitLane Predict, ensure your development environment meets the following requirements:

Node.js and npm

F1 PitLane Predict requires Node.js 20 (LTS) or higher.

node --version
# Should output v20.x.x or higher

If you need to install or update Node.js, download it from nodejs.org.

PostgreSQL

The application uses PostgreSQL as its database. You need PostgreSQL 12 or higher installed and running.

brew install postgresql@16
brew services start postgresql@16

Verify PostgreSQL is running:

psql --version
# Should output: psql (PostgreSQL) 12.x or higher

Development tools

Recommended IDE setup:

VSCode with extensions:
- Volar (Vue Language Features)
- TypeScript Vue Plugin (Volar)
- Prisma (for schema editing)

If you have Vetur installed, disable it when working with Vue 3 projects. Volar is the recommended extension for Vue 3.

Installation steps

1. Clone the repository

Clone the project from GitHub:

git clone https://github.com/P4ND4P0W3R/f1-pit-lane-predict.git
cd f1-pit-lane-predict

2. Install dependencies

Frontend dependencies

Install the Vue.js frontend dependencies:

npm install

This installs the following key packages:

Package	Version	Purpose
`vue`	^3.3.4	Core Vue.js framework
`vue-router`	^4.2.5	Client-side routing
`vuex`	^4.1.0	State management
`@prisma/client`	^5.7.0	Database client
`axios`	^1.6.2	HTTP client
`jsonwebtoken`	^9.0.2	JWT authentication
`typescript`	~5.2.0	Type safety
`vite`	^5.4.20	Build tool and dev server

Backend dependencies

Navigate to the server directory and install backend packages:

cd server
npm install
cd ..

This installs:

Package	Version	Purpose
`nitropack`	latest	Server framework
`bcrypt`	^5.1.1	Password hashing

3. Database setup

Create the database

Create a new PostgreSQL database for the application:

# Using createdb command
creatdb f1_pitlane_predict

# Or using psql
psql -U postgres
CREATE DATABASE f1_pitlane_predict;
\q

Configure environment variables

Create a .env file in the project root directory:

.env

DATABASE_URL="postgresql://username:password@localhost:5432/f1_pitlane_predict?schema=public"

Replace the connection string parameters:

username - Your PostgreSQL username (default: postgres)
password - Your PostgreSQL password
localhost - Database host (use localhost for local development)
5432 - PostgreSQL port (default: 5432)
f1_pitlane_predict - Database name

The .env file contains sensitive credentials and is already included in .gitignore. Never commit this file to version control.

Generate Prisma Client

Generate the Prisma Client based on your schema:

npx prisma generate

This creates type-safe database client code in node_modules/@prisma/client.

Run database migrations

Create the database schema by running migrations:

npx prisma migrate dev --name init

This command:

Creates migration files in prisma/migrations/
Applies the migration to your database
Generates Prisma Client

You should see output confirming the tables were created:

The following migration(s) have been created and applied from new schema changes:

migrations/
  └─ 20231201000000_init/
    └─ migration.sql

Your database is now in sync with your schema.

Verify database schema

Open Prisma Studio to visually inspect your database:

npx prisma studio

This opens a browser interface at http://localhost:5555 where you can view and edit your data.

Database schema overview

The application uses the following data models:

Core models

Drivers - F1 driver information

Driver ID, code, and permanent number
Personal details (name, nationality, date of birth)
Team association (foreign key to Teams)
Driver image and profile URL

Teams - Constructor/team information

Team ID, name, and nationality
Team logo and official URL
One-to-many relationship with Drivers

Races - Race event details

Season, round, and race name
Circuit information (ID, name, location, country)
Date and time of the race
One-to-many relationship with Results

Results - Race outcome data

Links to Race and Driver (foreign keys)
Finishing position and points awarded

Users - User account management

Username, email, and hashed password
Account balance for betting features
User type (regular/admin)
Created date and last login tracking

Bets - Betting system (future feature)

Links to User, Race, and Driver
Bet amount, odds, and status
Created timestamp

The Bets model is included in the schema for future betting functionality but is not fully implemented in the current version.

Configuration

Frontend configuration

The frontend uses Vite for development and building. Configuration is in vite.config.ts.

Backend configuration

The Nitro.js backend is configured in server/nitro.config.ts:

server/nitro.config.ts

export default defineNitroConfig({
  routeRules: {
    "/api/**": {
      cors: true,
      headers: {
        "Access-Control-Allow-Methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Credentials": "true",
        "Access-Control-Allow-Headers": "*",
      },
    },
  },
});

This configuration enables CORS for all API routes, allowing the frontend to communicate with the backend during development.

Running the application

Development mode

Run both the frontend and backend in development mode: Terminal 1 - Frontend:

npm run dev

Access the frontend at http://localhost:5173 Terminal 2 - Backend:

cd server
npm run dev

API available at http://localhost:3000

Production build

Build the frontend for production:

# Type check
npm run type-check

# Build
npm run build

# Preview production build
npm run preview

Build the backend:

cd server
npm run build

# Run production server
npm run preview

Troubleshooting

Prisma Client errors

If you encounter “Cannot find module ‘@prisma/client’” errors:

npx prisma generate

Always run this after modifying prisma/schema.prisma.

Database connection issues

Test your database connection:

npx prisma db pull

This introspects your database and should confirm connectivity. If connection fails:

Verify PostgreSQL is running: pg_isready
Check credentials in .env
Ensure the database exists
Verify firewall/network settings

Type errors in Vue components

Vue 3 with TypeScript requires special handling. Ensure you have:

vue-tsc installed (dev dependency)
TypeScript Vue Plugin (Volar) enabled in VSCode
Vetur extension disabled

Run type checking:

npm run type-check

Port conflicts

If ports 5173 or 3000 are in use:

export default defineConfig({
  server: {
    port: 5174 // Change to available port
  }
})

Next steps

API reference

Explore the REST API endpoints for drivers, teams, races, and more

Database schema

Deep dive into the Prisma schema and data relationships

Development guide

Learn best practices for developing features

Troubleshooting

Common issues and solutions for setup and development

Get Started

Core Features

Database

Development

Prerequisites

Node.js and npm

PostgreSQL

Development tools

Installation steps

1. Clone the repository

2. Install dependencies

Frontend dependencies

Backend dependencies

3. Database setup

Create the database

Configure environment variables

Generate Prisma Client

Run database migrations

Verify database schema

Database schema overview

Core models

Configuration

Frontend configuration

Backend configuration

Running the application

Development mode

Production build

Troubleshooting

Prisma Client errors

Database connection issues

Type errors in Vue components

Port conflicts

Next steps

API reference

Database schema

Development guide

Troubleshooting

Build docs developers (and LLMs) love

Get Started

Core Features

Database

Development

​Prerequisites

​Node.js and npm

​PostgreSQL

​Development tools

​Installation steps

​1. Clone the repository

​2. Install dependencies

​Frontend dependencies

​Backend dependencies

​3. Database setup

​Create the database

​Configure environment variables

​Generate Prisma Client

​Run database migrations

​Verify database schema

​Database schema overview

​Core models

​Configuration

​Frontend configuration

​Backend configuration

​Running the application

​Development mode

​Production build

​Troubleshooting

​Prisma Client errors

​Database connection issues

​Type errors in Vue components

​Port conflicts

​Next steps

API reference

Database schema

Development guide

Troubleshooting

Build docs developers (and LLMs) love

Prerequisites

Node.js and npm

PostgreSQL

Development tools

Installation steps

1. Clone the repository

2. Install dependencies

Frontend dependencies

Backend dependencies

3. Database setup

Create the database

Configure environment variables

Generate Prisma Client

Run database migrations

Verify database schema

Database schema overview

Core models

Configuration

Frontend configuration

Backend configuration

Running the application

Development mode

Production build

Troubleshooting

Prisma Client errors

Database connection issues

Type errors in Vue components

Port conflicts

Next steps