FRT Website

A modern website for the Formula Racing Team (FRT) to publish news, events, galleries, cars, publications, sponsors, and recruitment information. The site includes a CMS-backed content model and a public-facing Next.js application.

Tech Stack

Technologies used: Next.js (App Router) with React 19, TypeScript, Tailwind CSS 4, Payload CMS 3, PostgreSQL, FullCalendar, Lucide icons, ESLint, and Docker/Compose.

Project Structure

• src/app/ — Public-facing Next.js routes (App Router)
• src/collections/ — Payload CMS collections (Articles, Events, Cars, Gallery, etc.)
• src/(payload) — Payload admin integration
• src/components/ — UI components (cards, navbar, calendar, etc.)
• public/ — Static assets
• migrations/ — Database migrations (if/when used)

Prerequisites

• Node.js 18+ (Node 20 LTS recommended)
• Yarn 1.22+
• Docker & Docker Compose

Environment Variables

Create a .env file in the project root. Minimum required:

• DATABASE_URI — PostgreSQL connection string (e.g. postgres://user:pass@localhost:5432/frt)
• PAYLOAD_SECRET — Random string used by Payload for session/signing

Optional (only if you configure corresponding integrations):

• S3-compatible storage: S3_BUCKET, S3_ACCESS_KEY_ID, S3_SECRET_ACCESS_KEY, S3_REGION, S3_ENDPOINT
• Social APIs: FACEBOOK_*, INSTAGRAM_*, TWITTER_*, YOUTUBE_*

Never commit secrets to version control.

Run Locally

You can run the project either fully in Docker (recommended for parity) or run the app locally with Postgres in Docker.

Option A — Everything with Docker Compose (quick start)

This will start Postgres and the app container on port 3000.

# Build and start services in the background
docker compose up -d --build

# View logs (optional)
docker compose logs -f app

Then open:

• App: http://localhost:3000
• Payload Admin: http://localhost:3000/admin

Option B — Local app + Dockerized Postgres (developer workflow)

# 1) Start only the database
docker compose up -d postgres

# 2) Install dependencies
yarn install

# 3) Start Next.js dev server (Turbopack)
yarn dev

Open http://localhost:3000. Admin is available at http://localhost:3000/admin.

Scripts

• yarn dev — Run the development server
• yarn build — Create an optimized production build
• yarn start — Start the production server
• yarn lint — Run ESLint

Deployment

Since the project uses push: false for database schema management, you must run migrations manually after deploying new code.

Steps to Deploy

1. Pull latest changes:

   git pull origin main

2. Rebuild Docker containers:

   docker compose up -d --build

3. Run Migrations: Execute the migration command inside the running container:

   docker exec frt-app-1 yarn payload:migrate

   Note: You may be prompted to confirm the migration. You can auto-confirm with echo y | docker exec -i frt-app-1 yarn payload:migrate.

Troubleshooting Migrations

If you encounter ERR_UNKNOWN_FILE_EXTENSION errors with CSS files, ensure you are using the custom loader scripts (css-loader-register.mjs) which are included in the Docker image and used by the yarn payload:migrate script.

• Ensure Docker is running if you use Postgres via Compose.
• On first run, Payload will initialize tables in the configured Postgres database.
• If you change database credentials, update DATABASE_URI accordingly.
• Static assets live under public/. Media uploaded via the CMS will be stored where your Payload storage is configured.

What this site includes

• News/Articles, Events calendar, Galleries, Cars, Members, Publications, Sponsors, Association, Support Us, and Contact sections
• CMS-driven content editing with Payload
• Theming and reusable UI components

If you have questions or want to contribute, feel free to open an issue or PR.