Skip to content
Snippets Groups Projects

R3B Website and NUSTAR Member Database

Overview

This app contains the public website for R3B as well as the NUSTAR member database implemented in full stack NextJS. The public website is using the Payload (v3) for content management.

Technology Stack

Technology Purpose
Next.js Full-stack framework for both frontend and backend
Payload CMS Content management for the R3B website
TailwindCSS Utility-first CSS framework
MongoDB Database for Payload CMS data
SQLite Database for NUSTAR member information
pnpm Fast, disk space efficient package manager

Prerequisites

  • Docker and Docker Compose
  • Node.js 18+
  • pnpm 8+ (npm install -g pnpm)
  • Git

Installation

  1. Clone the repository:

    git clone [repository-url]
    cd nustar-r3b
  2. Install dependencies (only when running locally, without docker):

    # When running locally
    pnpm install
  3. Set up environment variables:

    cp .env.example .env

    ⚠️ WARNING: The default payload secret in .env.example is for development only. Always use a secure secret in production.

  4. Start the application:

    # Using Docker (recommended)
    docker compose up -d
    
    # Or using pnpm for local development
    pnpm dev

    ℹ️ NOTE: When running locally, change DATABASE_URI from mongodb://mongo/nustar-r3b to mongodb://127.0.0.1/nustar-r3b inside .env.

Development Setup

IDE Configuration

This project uses antfu/eslint-config for consistent code styling and linting.

Visual Studio Code

  1. Install the ESLint extension
  2. Install pnpm
  3. Run pnpm install inside the project directory
  4. The provided .vscode configuration already enables auto-fix on save

Neovim

Project Architecture

Project Architecture