Update readme instructions to include ngrok

Author: Gauravjeetsingh

README.md

@@ -21,19 +21,62 @@ Make sure you've [`git`](https://git-scm.com/book/en/v2/Getting-Started-Installi
 
 Open terminal and follow these steps;
 
-- Step 1: Clone the repo.
+- **Step 1**: Clone the repo.
 
 ```bash
 git clone https://github.com/KhalisFoundation/sttm-web/
 ```
 
-You should now see a `SikhiToTheMax-Web` folder in your present working directory. Let's change directory to it.
+You should now see a `sttm-web` folder in your present working directory. Let's change directory to it.
 
 ```bash
 cd sttm-web/
 ```
 
-- Step 2: Install dependencies.
+- **Step 2**: Setup python version 3.12.
+  - Install Python 3.12 (if not already installed)
+  - On mac:
+  ```bash
+  brew install [email protected]
+  ```
+  - On Linux
+  ```bash
+  sudo add-apt-repository ppa:deadsnakes/ppa
+  sudo apt update
+  sudo apt install python3.12 python3.12-venv
+  ```
+
+  - Create an isolated virtual environment
+  ```bash
+  /path/to/python3.12 -m venv myenv
+  ```
+
+  - Activate it
+  ```bash
+  source myenv/bin/activate
+  ```
+
+- **Step 3**: Setup node version 16
+  - Install nvm (if not already installed)
+  ```bash
+  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
+  ```
+  - Restart the terminal or run the following to activate
+  ```bash
+  export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
+  [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
+  ```
+
+  - Install node 16.20 using nvm
+  ```bash
+  nvm install 16.20
+  ``` 
+  - Switch to node 16
+  ```bash
+  nvm use 16.20
+  ``` 
+
+- **Step 4**: Install dependencies.
 
 ```bash
 # `ci` doesn't update package.json, and uses package-lock.json to install intended deps.
@@ -43,7 +86,7 @@ npm ci
 
 This will use `npm` that is included with `nodejs` to install project dependencies.
 
-- Step 3: Start the project.
+- **Step 5**: Start the project.
 
 If you are running this project for the first time or did some change, run the following command to create a build and run it:
 
@@ -59,17 +102,38 @@ npm start
 
 This will run a bunch of build tools and a `nodejs` server to deploy the code locally.
 
-- Step 4: Access your local dev environment of the SikhiToTheMax website
-
-```bash
-# On mac OS X
-open http://localhost:8080
-# On Linux
-google-chrome http://localhost:8080
-# On windows
-start chrome http://localhost:8080
-# Or just open chrome and enter the URL manually.
-```
+- **Step 6**: Setup ngrok 
+   
+  To avoid the API cors error, we can use ngrok to get a https url of project output.
+  
+  - Install ngrok
+  ```bash
+  # On mac OS X
+  brew install ngrok 
+  ```
+  ```bash
+  # On Linux
+  sudo snap install ngrok
+  ```
+
+  - Sign up & Get Auth Token
+    - Go to https://ngrok.com and sign up/log in.
+    - Find your Auth Token here: https://dashboard.ngrok.com/get-started/setup
+
+  - Add your auth token
+  ```bash
+  ngrok config add-authtoken <your-token>
+  ```
+
+  - Since this app runs on port 8080, expose it to ngrok
+  ```bash
+  ngrok http 8080
+  ```
+  - Get the forwarding URL from the command output
+  ```bash
+  Forwarding    https://1234abcd.ngrok.io -> http://localhost:8000
+  ```
+  - Open `https://1234abcd.ngrok.io` to see project output
 
 ## Contributing