ALPHA HKU Website

The official website for the ALPHA University Chapter at the University of Hong Kong.

This guide is for developers maintaining or contributing to this project.

Tech Stack

• Framework: Next.js (App Router)
• Language: TypeScript
• UI: shadcn/ui
• Styling: Tailwind CSS
• Code Quality: ESLint & Prettier
• Package Manager: pnpm

Getting Started

Prerequisites

• Node.js
• pnpm

Setup

1. Clone the repo:

   git clone https://github.com/ALPHA-HKU-Org/website.git
   cd website

2. Install dependencies:

   pnpm install

3. Run the dev server:

   pnpm dev

   The site will be running at http://localhost:3000.

Available Scripts

• pnpm dev: Starts the development server with Next.js Turbo.
• pnpm build: Creates a production-ready build.
• pnpm start: Starts the production server (requires pnpm build first).
• pnpm lint: Runs ESLint to find code quality issues.
• pnpm format: Formats all files. It's recommended to use the Prettier VSCode extension for format-on-save.

Project Structure

.
├── src/
│   ├── app/             # Next.js App Router pages and layouts
│   ├── components/
│   │   ├── primitives/  # Small components that take little space on the screen
│   │   ├── sections/    # Large components that can take up the entire screen
│   │   └── ui/          # Only put shadcn/ui components here for clarity
│   ├── lib/             # frequently reused functions and data
│   ├── content/         # MDX contents, see the subfolders name for more details
├── public/              # non-code assets

Working with shadcn/ui

This project uses shadcn/ui. Do not install components from npm or other package managers directly. Use the CLI to add new components to ensure they are added correctly to the project.

Adding New Components

To add a new component, run the following command, replacing button with the component you need:

pnpm dlx shadcn@latest add button

This command will add the new component file (e.g., button.tsx) to src/components/ui. You can then import and use it throughout the application.