An open API service indexing awesome lists of open source software.

https://github.com/kir-dev/frt

The new website for BME Formula Racing Team
https://github.com/kir-dev/frt

Last synced: 5 months ago
JSON representation

The new website for BME Formula Racing Team

Awesome Lists containing this project

README

          

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

```bash
# 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)

```bash
# 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**:
```bash
git pull origin main
```

2. **Rebuild Docker containers**:
```bash
docker compose up -d --build
```

3. **Run Migrations**:
Execute the migration command inside the running container:
```bash
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.