Skip to content

README.md

Latest commit

 

History

History
131 lines (91 loc) · 5.44 KB

README.md

File metadata and controls

131 lines (91 loc) · 5.44 KB

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

Next.js React TypeScript Tailwind CSS Payload CMS PostgreSQL FullCalendar Lucide ESLint Docker

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:

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.