SPAC 2024 Website

---

Storybook	Figma	Source	Project Board

Setup Guide

This Next.js project uses pnpm for package management.

The UI is powered by the Twilight Design System, built upon the following libraries:

• Aceternity UI
• Magic UI
• Shadcn/ui
• Tailwind CSS

UI/UX documentation is done in Figma and Storybook.

The contact form is powered by Resend.

The website is deployed on Vercel, and the Storybook app is deployed to Chromatic.

All commands can be found in package.json.

1. Clone repo

git clone https://github.com/ieee-spac/2024

2. Install Node.js V20+

3. Install pnpm

4. Install dependencies

### Navigate into directory first
cd 2024
### Install
pnpm i

4. Run servers

pnpm dev ### Website

pnpm sb ### Storybook

pnpm lint:inspect-open ### ESlint config inspector

Optional

Use Commitizen CLI

pnpm cz

Generate static builds for deployments

Create .env file based on .env.example template.

cp .env.example .env

• Obtain Resend API key to get contact form working
• Obtain Chromatic API key to publish Storybook to Chromatic.

pnpm build ### Website
pnpm build-storybook ### Storybook

Serve static build

pnpm start