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

Notes & Tips

• 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.