From d95036db4993d8393ff8dc0039df9bc522d35010 Mon Sep 17 00:00:00 2001 From: Adeline Ren Date: Wed, 17 Dec 2025 22:01:23 +0800 Subject: [PATCH 1/6] Revise README with updated setup instructions Updated installation instructions and added common errors section. --- README.md | 61 ++++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 45 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 344188f..d706ccf 100644 --- a/README.md +++ b/README.md @@ -4,11 +4,11 @@ The frontend for the NUSCC Website. ## 💻 Technologies Used -- **Frontend**: Next.js, React, TypeScript -- **Styling**: Tailwind CSS, Shadcn UI components -- **State Management**: React Hooks (useState, useEffect) -- **Icons**: Lucide React -- **Date Handling**: date-fns +- Frontend: Next.js, React, TypeScript +- Styling: Tailwind CSS, Shadcn UI components +- State Management: React Hooks (useState, useEffect) +- Icons: Lucide React +- Date Handling: date-fns ## 🚀 Getting Started @@ -16,28 +16,57 @@ The frontend for the NUSCC Website. - Node.js (v20+) - pnpm +- ngrok account ### Installation 1. Clone the repository: -```bash git clone https://github.com/usdevs/NUSCweb cd NUSCweb -``` -1. Install dependencies: - -```bash +2. Install dependencies pnpm install -``` -1. Setup your environment variables in `.env` file +3. Setup your environment variables in .env file +# Connect to Supabase via connection pooling +DATABASE_URL="postgresql://postgres.jybpfrxduyftoqptiovt:Zj6gP6K5zAbpQDZQ@aws-1-ap-southeast-1.pooler.supabase.com:6543/postgres?pgbouncer=true" + +# Direct connection to the database. Used for migrations +DIRECT_URL="postgresql://postgres.jybpfrxduyftoqptiovt:Zj6gP6K5zAbpQDZQ@aws-1-ap-southeast-1.pooler.supabase.com:5432/postgres" + +BOT_TOKEN= +SECRET_KEY= -1. Run the development server: +NEXT_PUBLIC_TELEGRAM_LOGIN_BOT= +## leave blank +NEXT_PUBLIC_POSTHOG_KEY= +NEXT_PUBLIC_POSTHOG_HOST= +If first time, For BOT_TOKEN; SECRET KEY; NEXT_PUBLIC_TELEGRAM_LOGIN_BOT +1. Go to @BotFather on Telegram +2. /newbot +3. input username for bot e.g. nuscc_web -> BotFather will send with a BOT_TOKEN e.g. 8209225870:AAGdI4Adj7It0fVrUFx4j4NB5FwsAeROADo +4. BOT_TOKEN= "8209225870:AAGdI4Adj7It0fVrUFx4j4NB5FwsAeROADo" +5. NEXT_PUBLIC_TELEGRAM_LOGIN_BOT= "nuscc_web" +6. SECRET_KEY="your_super_secret_random_string_here_12345" + +4. Go to https://dashboard.ngrok.com/get-started/your-authtoken and copy your authtoken +In powershell, run: +ngrok config add-authtoken YOUR_AUTHTOKEN_HERE +Then +ngrok http 3000 +You sould now see a HTTPS URL like https://nonfeatured-shawnna-skilled.ngrok-free.dev -> http://localhost:3000 +Then in @BotFather: +1. /mybots +2. Select nuscc_web (your username) +3. Click "Bot Settings" +4. Click "Domain" +5. Reply with: https://nonfeatured-shawnna-skilled.ngrok-free.dev (HTTPS URL given) +5. Run the development server: -```bash pnpm dev -``` -1. Open in your browser to see the frontend. +6. Open your ngrok HTTPS URL e.g. in your browser to see the frontend. + +### Common Errors +1. If you see "Bot domain invalid" on the top nav bar, make sure you are not on localhost:3000 and on the ngrok https url From 4916dd25165e2c147d1f45f765cd02e48d6a9700 Mon Sep 17 00:00:00 2001 From: Adeline Ren Date: Fri, 19 Dec 2025 13:18:02 +0800 Subject: [PATCH 2/6] Revise installation and environment variable setup Updated installation instructions and environment variable setup in README.md. Changed example values for DATABASE_URL and DIRECT_URL, and clarified steps for setting up BOT_TOKEN and ngrok. --- README.md | 40 ++++++++++++++++++++++++---------------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index d706ccf..da2a020 100644 --- a/README.md +++ b/README.md @@ -21,19 +21,21 @@ The frontend for the NUSCC Website. ### Installation 1. Clone the repository: - +```bash git clone https://github.com/usdevs/NUSCweb cd NUSCweb - +``` 2. Install dependencies +```bash pnpm install - -3. Setup your environment variables in .env file +``` +3. Setup your environment variables in .env file, with the .env.example file as reference +``` # Connect to Supabase via connection pooling -DATABASE_URL="postgresql://postgres.jybpfrxduyftoqptiovt:Zj6gP6K5zAbpQDZQ@aws-1-ap-southeast-1.pooler.supabase.com:6543/postgres?pgbouncer=true" +DATABASE_URL="your_database_url" # Direct connection to the database. Used for migrations -DIRECT_URL="postgresql://postgres.jybpfrxduyftoqptiovt:Zj6gP6K5zAbpQDZQ@aws-1-ap-southeast-1.pooler.supabase.com:5432/postgres" +DIRECT_URL="direct_url" BOT_TOKEN= SECRET_KEY= @@ -42,31 +44,37 @@ NEXT_PUBLIC_TELEGRAM_LOGIN_BOT= ## leave blank NEXT_PUBLIC_POSTHOG_KEY= NEXT_PUBLIC_POSTHOG_HOST= +``` If first time, For BOT_TOKEN; SECRET KEY; NEXT_PUBLIC_TELEGRAM_LOGIN_BOT +``` 1. Go to @BotFather on Telegram 2. /newbot -3. input username for bot e.g. nuscc_web -> BotFather will send with a BOT_TOKEN e.g. 8209225870:AAGdI4Adj7It0fVrUFx4j4NB5FwsAeROADo -4. BOT_TOKEN= "8209225870:AAGdI4Adj7It0fVrUFx4j4NB5FwsAeROADo" +3. input username for bot e.g. nuscc_web -> BotFather will send with a BOT_TOKEN e.g. XXXXXXXX +4. BOT_TOKEN= "XXXXXXXX" 5. NEXT_PUBLIC_TELEGRAM_LOGIN_BOT= "nuscc_web" 6. SECRET_KEY="your_super_secret_random_string_here_12345" - +``` 4. Go to https://dashboard.ngrok.com/get-started/your-authtoken and copy your authtoken -In powershell, run: +In terminal, run: +``` ngrok config add-authtoken YOUR_AUTHTOKEN_HERE Then ngrok http 3000 -You sould now see a HTTPS URL like https://nonfeatured-shawnna-skilled.ngrok-free.dev -> http://localhost:3000 -Then in @BotFather: +``` +You should now see a HTTPS URL like https://abc123.ngrok.io -> http://localhost:3000 +Then in @BotFather: +``` 1. /mybots 2. Select nuscc_web (your username) 3. Click "Bot Settings" 4. Click "Domain" -5. Reply with: https://nonfeatured-shawnna-skilled.ngrok-free.dev (HTTPS URL given) +5. Reply with: https://abc123.ngrok.io (HTTPS URL given) +``` 5. Run the development server: - +``` pnpm dev - -6. Open your ngrok HTTPS URL e.g. in your browser to see the frontend. +``` +6. Open your ngrok HTTPS URL e.g. in your browser to see the frontend. ### Common Errors 1. If you see "Bot domain invalid" on the top nav bar, make sure you are not on localhost:3000 and on the ngrok https url From 47dc8923f55c89793c3ebdc77be7f1746d259a19 Mon Sep 17 00:00:00 2001 From: Adeline Ren Date: Fri, 19 Dec 2025 13:21:15 +0800 Subject: [PATCH 3/6] Fix formatting in README for ngrok authtoken step --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index da2a020..17ba9b6 100644 --- a/README.md +++ b/README.md @@ -54,7 +54,7 @@ If first time, For BOT_TOKEN; SECRET KEY; NEXT_PUBLIC_TELEGRAM_LOGIN_BOT 5. NEXT_PUBLIC_TELEGRAM_LOGIN_BOT= "nuscc_web" 6. SECRET_KEY="your_super_secret_random_string_here_12345" ``` -4. Go to https://dashboard.ngrok.com/get-started/your-authtoken and copy your authtoken +4. Go to https://dashboard.ngrok.com/get-started/your-authtoken and copy your authtoken. In terminal, run: ``` ngrok config add-authtoken YOUR_AUTHTOKEN_HERE From 3fe9bebb50c0762be9486c5a06d08d5545a03bcb Mon Sep 17 00:00:00 2001 From: Adeline Ren Date: Fri, 19 Dec 2025 13:32:35 +0800 Subject: [PATCH 4/6] Modify database URL placeholders in README --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 17ba9b6..f8ec20a 100644 --- a/README.md +++ b/README.md @@ -32,10 +32,10 @@ pnpm install 3. Setup your environment variables in .env file, with the .env.example file as reference ``` # Connect to Supabase via connection pooling -DATABASE_URL="your_database_url" +DATABASE_URL= # Direct connection to the database. Used for migrations -DIRECT_URL="direct_url" +DIRECT_URL= BOT_TOKEN= SECRET_KEY= From dad7aa140fca9691ac94bbcdb0ed5e072047a097 Mon Sep 17 00:00:00 2001 From: TheMythologist Date: Wed, 7 Jan 2026 11:57:12 +0800 Subject: [PATCH 5/6] docs: Update README.md on setup procedures --- .env.example | 5 +- README.md | 115 ++++++++++++++++-------------------- src/lib/utils/server/jwt.ts | 2 +- 3 files changed, 54 insertions(+), 68 deletions(-) diff --git a/.env.example b/.env.example index 9eb7fc9..a374103 100644 --- a/.env.example +++ b/.env.example @@ -4,10 +4,11 @@ DATABASE_URL= # Direct connection to the database. Used for migrations DIRECT_URL= +# Retrieve these values based on your Telegram dev bot BOT_TOKEN= -SECRET_KEY= - NEXT_PUBLIC_TELEGRAM_LOGIN_BOT= +# Can be left blank - set only in production +SECRET_KEY= NEXT_PUBLIC_POSTHOG_KEY= NEXT_PUBLIC_POSTHOG_HOST= diff --git a/README.md b/README.md index f8ec20a..069994b 100644 --- a/README.md +++ b/README.md @@ -4,77 +4,62 @@ The frontend for the NUSCC Website. ## 💻 Technologies Used -- Frontend: Next.js, React, TypeScript -- Styling: Tailwind CSS, Shadcn UI components -- State Management: React Hooks (useState, useEffect) -- Icons: Lucide React -- Date Handling: date-fns +- **Frontend**: Next.js, React, TypeScript +- **Database**: Prisma, Supabase +- **Styling**: Tailwind CSS, Shadcn UI components ## 🚀 Getting Started ### Prerequisites -- Node.js (v20+) -- pnpm -- ngrok account +- Node.js (v22+) +- [pnpm](https://pnpm.io/installation) +- Any tool to expose localhost to https endpoints, such as [ngrok](https://ngrok.com/docs/getting-started) or [tunnl.gg](https://tunnl.gg/) + - This guide will be assuming you are using ngrok ### Installation +1. Set up your Telegram dev bot + + 1. Go to [@BotFather](https://t.me/BotFather) on Telegram + 1. Run `/newbot` + 1. Enter a username for the bot (e.g. nusc_web_dev_bot) -> BotFather will send with a BOT_TOKEN e.g. XXXXXXXX + 1. In your `.env` file, set the following variables: + - Set `BOT_TOKEN` with the token given by [@BotFather](https://t.me/BotFather) + - Set `NEXT_PUBLIC_TELEGRAM_LOGIN_BOT` with your bot username + 1. Clone the repository: -```bash -git clone https://github.com/usdevs/NUSCweb -cd NUSCweb -``` -2. Install dependencies -```bash -pnpm install -``` -3. Setup your environment variables in .env file, with the .env.example file as reference -``` -# Connect to Supabase via connection pooling -DATABASE_URL= - -# Direct connection to the database. Used for migrations -DIRECT_URL= - -BOT_TOKEN= -SECRET_KEY= - -NEXT_PUBLIC_TELEGRAM_LOGIN_BOT= -## leave blank -NEXT_PUBLIC_POSTHOG_KEY= -NEXT_PUBLIC_POSTHOG_HOST= -``` -If first time, For BOT_TOKEN; SECRET KEY; NEXT_PUBLIC_TELEGRAM_LOGIN_BOT -``` -1. Go to @BotFather on Telegram -2. /newbot -3. input username for bot e.g. nuscc_web -> BotFather will send with a BOT_TOKEN e.g. XXXXXXXX -4. BOT_TOKEN= "XXXXXXXX" -5. NEXT_PUBLIC_TELEGRAM_LOGIN_BOT= "nuscc_web" -6. SECRET_KEY="your_super_secret_random_string_here_12345" -``` -4. Go to https://dashboard.ngrok.com/get-started/your-authtoken and copy your authtoken. -In terminal, run: -``` -ngrok config add-authtoken YOUR_AUTHTOKEN_HERE -Then -ngrok http 3000 -``` -You should now see a HTTPS URL like https://abc123.ngrok.io -> http://localhost:3000 -Then in @BotFather: -``` -1. /mybots -2. Select nuscc_web (your username) -3. Click "Bot Settings" -4. Click "Domain" -5. Reply with: https://abc123.ngrok.io (HTTPS URL given) -``` -5. Run the development server: -``` -pnpm dev -``` -6. Open your ngrok HTTPS URL e.g. in your browser to see the frontend. - -### Common Errors -1. If you see "Bot domain invalid" on the top nav bar, make sure you are not on localhost:3000 and on the ngrok https url + + ```bash + git clone https://github.com/usdevs/NUSCweb + cd NUSCweb + ``` + +1. Install dependencies: + + ```bash + pnpm install + ``` + +1. Setup your environment variables in `.env` file, with `.env.example` for reference + +1. Expose your localhost port: + + ```bash + ngrok http 3000 + ``` + + - Retrieve your custom HTTPS URL (e.g. https://xxx.ngrok.io) + - In [@BotFather](https://t.me/BotFather), run `/setdomain`, choose your nusc dev bot, and enter the ngrok URL + +1. Run the development server: + + ```bash + pnpm dev + ``` + +1. 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 diff --git a/src/lib/utils/server/jwt.ts b/src/lib/utils/server/jwt.ts index 12934b1..b6c327b 100644 --- a/src/lib/utils/server/jwt.ts +++ b/src/lib/utils/server/jwt.ts @@ -1,6 +1,6 @@ import { default as jwt } from 'jsonwebtoken'; -const SECRET_KEY = process.env.SECRET_KEY || 'hello'; +const SECRET_KEY = process.env.SECRET_KEY || 'secret'; export const generateToken = (payload: string | Buffer | object): string => jwt.sign(payload, SECRET_KEY, { From d37c0e74f91bbdb03fb2ef9a6f3fa178f6b782c0 Mon Sep 17 00:00:00 2001 From: TheMythologist Date: Wed, 7 Jan 2026 11:59:34 +0800 Subject: [PATCH 6/6] chore: Format README.md --- README.md | 43 +++++++++++++++++++++---------------------- 1 file changed, 21 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 069994b..a13412c 100644 --- a/README.md +++ b/README.md @@ -20,43 +20,42 @@ The frontend for the NUSCC Website. ### Installation 1. Set up your Telegram dev bot - - 1. Go to [@BotFather](https://t.me/BotFather) on Telegram - 1. Run `/newbot` - 1. Enter a username for the bot (e.g. nusc_web_dev_bot) -> BotFather will send with a BOT_TOKEN e.g. XXXXXXXX - 1. In your `.env` file, set the following variables: - - Set `BOT_TOKEN` with the token given by [@BotFather](https://t.me/BotFather) - - Set `NEXT_PUBLIC_TELEGRAM_LOGIN_BOT` with your bot username + 1. Go to [@BotFather](https://t.me/BotFather) on Telegram + 1. Run `/newbot` + 1. Enter a username for the bot (e.g. nusc_web_dev_bot) -> BotFather will send with a BOT_TOKEN e.g. XXXXXXXX + 1. In your `.env` file, set the following variables: + - Set `BOT_TOKEN` with the token given by [@BotFather](https://t.me/BotFather) + - Set `NEXT_PUBLIC_TELEGRAM_LOGIN_BOT` with your bot username 1. Clone the repository: - ```bash - git clone https://github.com/usdevs/NUSCweb - cd NUSCweb - ``` + ```bash + git clone https://github.com/usdevs/NUSCweb + cd NUSCweb + ``` 1. Install dependencies: - ```bash - pnpm install - ``` + ```bash + pnpm install + ``` 1. Setup your environment variables in `.env` file, with `.env.example` for reference 1. Expose your localhost port: - ```bash - ngrok http 3000 - ``` + ```bash + ngrok http 3000 + ``` - - Retrieve your custom HTTPS URL (e.g. https://xxx.ngrok.io) - - In [@BotFather](https://t.me/BotFather), run `/setdomain`, choose your nusc dev bot, and enter the ngrok URL + - Retrieve your custom HTTPS URL (e.g. https://xxx.ngrok.io) + - In [@BotFather](https://t.me/BotFather), run `/setdomain`, choose your nusc dev bot, and enter the ngrok URL 1. Run the development server: - ```bash - pnpm dev - ``` + ```bash + pnpm dev + ``` 1. Access our dev server via the ngrok HTTPS URL (e.g. https://xxx.ngrok.io)