Skip to content

README.md

Latest commit

 

History

History
78 lines (53 loc) · 2.16 KB

README.md

File metadata and controls

78 lines (53 loc) · 2.16 KB

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

  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