NUSCC Frontend

The frontend for the NUSCC Website.

💻 Technologies Used

• Frontend: Next.js, React, TypeScript
• Database: Prisma, Supabase
• Styling: Tailwind CSS, Shadcn UI components

🚀 Getting Started

Prerequisites

• Node.js (v22+)
• pnpm
• Any tool to expose localhost to https endpoints, such as ngrok or tunnl.gg
  • This guide will be assuming you are using ngrok

Installation

1. Set up your Telegram dev bot

   1. Go to @BotFather on Telegram
   2. Run /newbot
   3. Enter a username for the bot (e.g. nusc_web_dev_bot) -> BotFather will send with a BOT_TOKEN e.g. XXXXXXXX
   4. In your .env file, set the following variables:
      • Set BOT_TOKEN with the token given by @BotFather
      • Set NEXT_PUBLIC_TELEGRAM_LOGIN_BOT with your bot username

2. Clone the repository:

   git clone https://github.com/usdevs/NUSCweb
   cd NUSCweb

3. Install dependencies:

   pnpm install

4. Generate a JWT key pair for authentication:

   openssl genrsa -out private.pem 2048
   openssl rsa -in private.pem -pubout -out public.pem

   Then set the following in your .env file:

   JWT_PRIVATE_KEY=$(python -c "f=open('private.pem').read().strip(); print(f.replace(chr(10), r'\n'))")
   JWT_PUBLIC_KEY=$(python -c "f=open('public.pem').read().strip(); print(f.replace(chr(10), r'\n'))")

5. Setup your remaining environment variables in .env file, with .env.example for reference

6. Expose your localhost port:

   ngrok http 3000

   • Retrieve your custom HTTPS URL (e.g. https://xxx.ngrok.io)
   • In @BotFather, run /setdomain, choose your nusc dev bot, and enter the ngrok URL

7. Run the development server:

   pnpm dev

8. Access our dev server via the ngrok HTTPS URL (e.g. https://xxx.ngrok.io)

❓ Common Errors

1. If you see "Bot domain invalid" on the top nav bar, ensure your accessing your dev environment via the ngrok HTTPS URL, not your localhost