F1 2025 Calendar

A simple Next.js application that displays the Formula 1 2025 season calendar in a grid format with country flags and race information.

Features

• 📅 Complete F1 2025 season calendar
• 🏁 Country flags for each race
• 🏎️ Sprint race indicators
• 📱 Responsive grid layout
• 🎨 Modern UI with shadcn/ui components
• ⚡ Fast loading with Next.js

Tech Stack

• Framework: Next.js 14 with App Router
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Language: TypeScript
• Icons: Lucide React

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Install dependencies:

npm install

2. Run the development server:

npm run dev

3. Open http://localhost:3000 in your browser.

Project Structure

f1-calendar/
├── src/
│   ├── app/
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/
│   │   ├── ui/           # shadcn/ui components
│   │   ├── CalendarGrid.tsx
│   │   ├── CountryFlag.tsx
│   │   └── RaceCard.tsx
│   ├── lib/
│   │   └── utils.ts
│   └── types/
│       └── f1.ts
├── data/
│   └── f1_2025_enhanced_data.json
└── public/

Components

RaceCard

Displays individual race information including:

• Country flag
• Race name and circuit
• Sprint/race indicator
• Round number and dates
• Next session information

CalendarGrid

Responsive grid layout that displays all races in card format.

CountryFlag

Displays country flags using emoji for all F1 host countries.

Data Structure

The application uses the F1 2025 enhanced data JSON file which contains:

• Season information
• Race details (name, circuit, country, dates)
• Session information (practice, qualifying, race, sprint)
• Timezone information

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

Customization

The application is designed to be easily maintainable with:

• Modular component structure
• TypeScript for type safety
• Tailwind CSS for styling
• shadcn/ui for consistent UI components

You can easily add new features by:

1. Creating new components in src/components/
2. Adding new tabs in the main page
3. Extending the data types in src/types/f1.ts