docs: Update README.md on setup procedures (#39)

* Revise README with updated setup instructions

Updated installation instructions and added common errors section.

* 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.

* Fix formatting in README for ngrok authtoken step

* Modify database URL placeholders in README

* docs: Update README.md on setup procedures

* chore: Format README.md

---------

Co-authored-by: TheMythologist <leekaixuan2001@gmail.com>

Author: Adrenalineren

.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=

README.md

@@ -5,39 +5,60 @@ The frontend for the NUSCC Website.
 ## 💻 Technologies Used
 
 - **Frontend**: Next.js, React, TypeScript
+- **Database**: Prisma, Supabase
 - **Styling**: Tailwind CSS, Shadcn UI components
-- **State Management**: React Hooks (useState, useEffect)
-- **Icons**: Lucide React
-- **Date Handling**: date-fns
 
 ## 🚀 Getting Started
 
 ### Prerequisites
 
-- Node.js (v20+)
-- pnpm
+- 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
-```
+   ```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:
 
-1. Setup your environment variables in `.env` file
+   ```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
-```
+   ```bash
+   pnpm dev
+   ```
+
+1. Access our dev server via the ngrok HTTPS URL (e.g. https://xxx.ngrok.io)
+
+## ❓ Common Errors
 
-1. Open <http://localhost:3000> in your browser to see the frontend.
+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

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, {