Merge pull request #98 from ruiqi7/feature/coding-sandbox

guanquann · web-flow · commit 563a247d8447 · 2024-11-05T21:22:52.000+08:00
Add Redis instance for collab service
diff --git a/backend/README.md b/backend/README.md
@@ -14,6 +14,10 @@
 
    3. Enter `host.docker.internal` as the Host.
 
+   4. Enter the port used by the respective service:
+      - User Service: `6379`
+      - Collab Service: `6380`
+
 4. Follow the instructions [here](https://nodejs.org/en/download/package-manager) to set up Node v20.
 
 ## Setting-up cloud MongoDB (in production)
diff --git a/backend/code-execution-service/.env.sample b/backend/code-execution-service/.env.sample
@@ -1,10 +1,12 @@
 NODE_ENV=development
 SERVICE_PORT=3004
 
+# Origins for cors
 ORIGINS=http://localhost:5173,http://127.0.0.1:5173
 
-# One Compiler 
+# Other service APIs
+QUESTION_SERVICE_URL=http://question-service:3000/api/questions
+
+# One Compiler configuration
 ONE_COMPILER_URL=https://onecompiler-apis.p.rapidapi.com/api/v1/run
 ONE_COMPILER_KEY=<ONE_COMPILER_KEY>
-
-QUESTION_SERVICE_URL=http://question-service:3000/api/questions
diff --git a/backend/code-execution-service/README.md b/backend/code-execution-service/README.md
@@ -6,16 +6,22 @@
 
 2. Sign up for a free OneCompiler API [here](https://rapidapi.com/onecompiler-onecompiler-default/api/onecompiler-apis).
 
-3. Update `ONE_COMPILER_KEY` in `.env` with the the value of `x-rapidapi-key`.
+3. Update `ONE_COMPILER_KEY` in the `.env` file with the value of `x-rapidapi-key`.
 
-## Running Code Execution Service without Docker
+## Running Code Execution Service Locally
 
 1. Open Command Line/Terminal and navigate into the `code-execution-service` directory.
 
 2. Run the command: `npm install`. This will install all the necessary dependencies.
 
 3. Run the command `npm start` to start the Code Execution Service in production mode, or use `npm run dev` for development mode, which includes features like automatic server restart when you make code changes.
 
+## Running Code Execution Service with Docker
+
+1. Open the Command Line/Terminal.
+
+2. Run the command `docker compose run code-execution-service` to start up the Code Execution Service and its dependencies.
+
 ## After running
 
 1. To view Code Execution Service documentation, go to http://localhost:3004/docs.
diff --git a/backend/collab-service/.env.sample b/backend/collab-service/.env.sample
@@ -1,9 +1,11 @@
 NODE_ENV=development
 SERVICE_PORT=3003
 
+# Origins for cors
 ORIGINS=http://localhost:5173,http://127.0.0.1:5173
 
-REDIS_URI=redis://redis:6379
+# Redis configuration
+REDIS_URI=redis://collab-service-redis:6379
 
-# Test
+# Tests
 REDIS_URI_TEST=redis://test-redis:6379
diff --git a/backend/collab-service/README.md b/backend/collab-service/README.md
@@ -8,45 +8,49 @@
 
    - `REDIS_URI`
 
-## Running Collab Service Individually
+## Running Collab Service Locally
 
-1. Set up and run Redis using `docker compose run --rm --name redis -p 6379:6379 redis`.
+1. Set up and run Redis using `docker compose run --rm --name collab-service-redis -p 6380:6379 collab-service-redis`.
 
-2. Open Command Line/Terminal and navigate into the `collab-service` directory.
+2. Comment out `REDIS_URI` in the `.env` file.
 
-3. Run the command: `npm install`. This will install all the necessary dependencies.
+3. Open Command Line/Terminal and navigate into the `collab-service` directory.
 
-4. Run the command `npm start` to start the Collab Service in production mode, or use `npm run dev` for development mode, which includes features like automatic server restart when you make code changes.
+4. Run the command `npm install`. This will install all the necessary dependencies.
 
-## Running Collab Service Individually with Docker
+5. Run the command `npm start` to start the Collab Service in production mode, or use `npm run dev` for development mode, which includes features like automatic server restart when you make code changes.
 
-1. Open the command line/terminal.
+## Running Collab Service with Docker
 
-2. Run the command `docker compose run collab-service` to start up the collab service and its dependencies.
+1. Open the Command Line/Terminal.
+
+2. Run the command `docker compose run collab-service` to start up the Collab Service and its dependencies.
 
 ## After running
 
 1. Using applications like Postman, you can interact with the Collab Service on port 3003. If you wish to change this, please update the `.env` file.
 
 2. Setting up Socket.IO connection on Postman:
+
    - You should open 2 tabs on Postman to simulate 2 users in the Collab Service.
 
    - Select the `Socket.IO` option and set URL to `http://localhost:3003`. Click `Connect`.
-   ![image1.png](docs/image1.png)
-   
+     ![image1.png](docs/image1.png)
+
    - Add the following events in the `Events` tab and listen to them.
-   ![image2.png](docs/image2.png)
-   
+     ![image2.png](docs/image2.png)
+
    - To send a message, go to the `Message` tab and ensure that your message is being parsed as `JSON`.
-   ![image3.png](docs/image3.png)
-   
+     ![image3.png](docs/image3.png)
+
    - In the `Event name` input, input the correct event name. Click on `Send` to send a message.
-   ![image4.png](docs/image4.png)
+     ![image4.png](docs/image4.png)
+
+## Events Available
 
-## Events Available   
 | Event Name     | Description                       | Parameters                                                                    | Response Event                                                                                                                                                                                                           |
-|----------------|-----------------------------------|-------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| -------------- | --------------------------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **join**       | Joins a collaboration room.       | `roomId` (string): ID of the room.                                            | **room_full:** Notify the user if the room is full (only 2 users allowed).<br/>**connected:** Notify the user if successfully connected.<br/>**new_user_connected:** Notify the other user if a new user joins the room. |
 | **change**     | Sends updated code to other user. | `roomId` (string): ID of the room.<br/>`code` (string): Updated code content. | **code_change:** Notify the other user with the updated code content.                                                                                                                                                    |
 | **leave**      | Leaves the collaboration room.    | `roomId` (string): ID of the room.                                            | **partner_left:** Notify the other user when one leaves the room.                                                                                                                                                        |
-| **disconnect** | Disconnects from the server.      | None                                                                          | **partner_disconnected:** Notify the other user when one is disconnected.                                                                                                                                                |
+| **disconnect** | Disconnects from the server.      | None                                                                          | **partner_disconnected:** Notify the other user when one is disconnected.                                                                                                                                                |
diff --git a/backend/collab-service/src/config/redis.ts b/backend/collab-service/src/config/redis.ts
@@ -6,7 +6,7 @@ dotenv.config();
 const REDIS_URI =
   process.env.NODE_ENV === "test"
     ? process.env.REDIS_URI_TEST
-    : process.env.REDIS_URI || "redis://localhost:6379";
+    : process.env.REDIS_URI || "redis://localhost:6380";
 
 const client = createClient({ url: REDIS_URI });
 
diff --git a/backend/collab-service/src/handlers/websocketHandler.ts b/backend/collab-service/src/handlers/websocketHandler.ts
@@ -151,8 +151,7 @@ const getDocument = (roomId: string) => {
   let doc = collabSessions.get(roomId);
   if (!doc) {
     doc = new Doc();
-    // eslint-disable-next-line
-    doc.on(CollabEvents.UPDATE, (_update) => {
+    doc.on(CollabEvents.UPDATE, () => {
       saveDocument(roomId, doc!);
       io.to(roomId).emit(CollabEvents.UPDATE, encodeStateAsUpdateV2(doc!));
     });
diff --git a/backend/communication-service/.env.sample b/backend/communication-service/.env.sample
@@ -1,4 +1,5 @@
 NODE_ENV=development
 SERVER_PORT=3005
 
-ORIGINS=http://localhost:5173,http://127.0.0.1:5173
+# Origins for cors
+ORIGINS=http://localhost:5173,http://127.0.0.1:5173
diff --git a/backend/matching-service/.env.sample b/backend/matching-service/.env.sample
@@ -1,18 +1,16 @@
 NODE_ENV=development
 SERVICE_PORT=3002
 
+# Origins for cors
 ORIGINS=http://localhost:5173,http://127.0.0.1:5173
 
-
-## FOR RABBITMQ, comment out the variables under whichever use case (1) or (2) that is not applicable
-# (1) RabbitMq for running matching service individually
-RABBITMQ_ADDR=amqp://localhost:5672  #comment out if use case is (2)
-
-# (2) RabbitMq for running matching service with other services using docker compose
-RABBITMQ_DEFAULT_USER=admin  #comment out if use case is (1)
-RABBITMQ_DEFAULT_PASS=password  #comment out if use case is (1)
-RABBITMQ_ADDR=amqp://admin:password@rabbitmq:5672  #comment out if use case is (1)
-
+# Other service APIs
 QUESTION_SERVICE_URL=http://question-service:3000/api/questions
-
 QN_HISTORY_SERVICE_URL=http://qn-history-service:3006/api/qnhistories
+
+# RabbitMq configuration
+RABBITMQ_DEFAULT_USER=admin
+RABBITMQ_DEFAULT_PASS=password
+
+## Do not change anything below this line
+RABBITMQ_ADDR=amqp://${RABBITMQ_DEFAULT_USER}:${RABBITMQ_DEFAULT_PASS}@rabbitmq:5672
diff --git a/backend/matching-service/README.md b/backend/matching-service/README.md
@@ -4,21 +4,27 @@
 
 ## Setting-up Matching Service
 
-1. In the `matching-service` directory, create a copy of the `.env.sample` file and name it `.env`. If you are looking to run matching service with the other services using docker-compose, comment out the variable `RABBITMQ_ADDR` under use case (1) in the .env file. Otherwise, if you are looking to run matching service individually, comment out the variables `RABBITMQ_DEFAULT_USER`, `RABBITMQ_DEFAULT_PASS` and `RABBITMQ_ADDR` under use case (2) in the .env file.
+1. In the `matching-service` directory, create a copy of the `.env.sample` file and name it `.env`.
 
-2. If you are running matching service together with other services using docker-compose, to set up credentials for RabbitMq, update the RabbitMq variables in the `.env` file. Update `RABBITMQ_DEFAULT_USER` and `RABBITMQ_DEFAULT_PASS` to what you want, then update `RABBITMQ_ADDR` to be `amqp://<RABBITMQ_DEFAULT_USER>:<RABBITMQ_DEFAULT_PASS>@rabbitmq:5672`. You can access RabbitMq management user interface locally with the username in `RABBITMQ_DEFAULT_USER` and password in `RABBITMQ_DEFAULT_PASS` at http://localhost:15672.
+2. You can access RabbitMq management user interface locally with `RABBITMQ_DEFAULT_USER` as the username and `RABBITMQ_DEFAULT_PASS` as the password at http://localhost:15672. You may update `RABBITMQ_DEFAULT_USER` and `RABBITMQ_DEFAULT_PASS` in the `.env` file to change your RabbitMq credentials if necessary.
 
-3. If you are running matching service individually, you do not need to make any changes to `RABBITMQ_ADDR`. You can access RabbitMq management user interface locally with the username `guest` and password `guest` at http://localhost:15672.
+## Running Matching Service Locally
 
-## Running Matching Service Individually with Docker
+1. Set up and run RabbitMq using `docker run -it --rm --name rabbitmq -p 5672:5672 -p 15672:15672 rabbitmq:4.0-management`.
 
-1. Set up and run RabbitMq locally on your computer with the command `docker run -it --rm --name rabbitmq -p 5672:5672 -p 15672:15672 rabbitmq:4.0-management`.
+2. Comment out `RABBITMQ_ADDR` in the `.env` file. You can access RabbitMq management user interface locally with the username `guest` and password `guest` at http://localhost:15672.
 
-2. Open Command Line/Terminal and navigate into the `matching-service` directory.
+3. Open Command Line/Terminal and navigate into the `matching-service` directory.
 
-3. Run the command: `npm install`. This will install all the necessary dependencies.
+4. Run the command: `npm install`. This will install all the necessary dependencies.
 
-4. Run the command `npm start` to start the Matching Service in production mode, or use `npm run dev` for development mode, which includes features like automatic server restart when you make code changes. If you encounter connection errors, please wait for a few minutes before running `npm start` again as RabbitMq may take some time to start up.
+5. Run the command `npm start` to start the Matching Service in production mode, or use `npm run dev` for development mode, which includes features like automatic server restart when you make code changes. If you encounter connection errors, please wait for a few minutes before running `npm start` again as RabbitMq may take some time to start up.
+
+## Running Matching Service with Docker
+
+1. Open the Command Line/Terminal.
+
+2. Run the command `docker compose run matching-service` to start up the Matching Service and its dependencies.
 
 ## After running
 
diff --git a/backend/matching-service/src/config/rabbitmq.ts b/backend/matching-service/src/config/rabbitmq.ts
@@ -6,6 +6,8 @@ import { Complexities, Categories, Languages } from "../utils/constants";
 
 dotenv.config();
 
+const RABBITMQ_ADDR = process.env.RABBITMQ_ADDR || "amqp://localhost:5672";
+
 let mrConnection: Connection;
 const queues: string[] = [];
 const pendingQueueRequests = new Map<string, Map<string, MatchRequestItem>>();
@@ -35,7 +37,7 @@ const setUpQueue = async (queueName: string) => {
 export const connectToRabbitMq = async () => {
   try {
     initQueueNames();
-    mrConnection = await amqplib.connect(`${process.env.RABBITMQ_ADDR}`);
+    mrConnection = await amqplib.connect(RABBITMQ_ADDR);
     for (const queue of queues) {
       await setUpQueue(queue);
       pendingQueueRequests.set(queue, new Map<string, MatchRequestItem>());
diff --git a/backend/qn-history-service/.env.sample b/backend/qn-history-service/.env.sample
@@ -1,14 +1,16 @@
 NODE_ENV=development
 SERVICE_PORT=3006
 
+# Origins for cors
 ORIGINS=http://localhost:5173,http://127.0.0.1:5173
 
-# if using cloud MongoDB, replace with actual URI (run service separately)
-MONGO_CLOUD_URI=<MONGO_CLOUD_URI>
-
+# Tests
 MONGO_URI_TEST=mongodb://mongo:mongo@test-mongo:27017/
 
-# if using local MongoDB (run service with docker-compose)
+# If using cloud MongoDB, replace with actual URI (run service separately)
+MONGO_CLOUD_URI=<MONGO_CLOUD_URI>
+
+# If using local MongoDB (run service with docker-compose)
 ## MongoDB credentials
 MONGO_INITDB_ROOT_USERNAME=root
 MONGO_INITDB_ROOT_PASSWORD=example
diff --git a/backend/qn-history-service/README.md b/backend/qn-history-service/README.md
@@ -8,20 +8,30 @@
 
 2. To connect to your cloud MongoDB instead of your local MongoDB, set the `NODE_ENV` to `production` instead of `development`.
 
-3. Update `MONGO_INITDB_ROOT_USERNAME`, `MONGO_INITDB_ROOT_PASSWORD` to change your MongoDB credentials if necessary.
+3. Update the following variable in the `.env` file:
+
+   - `MONGO_CLOUD_URI`
+
+   You can also update `MONGO_INITDB_ROOT_USERNAME`, `MONGO_INITDB_ROOT_PASSWORD` to change your MongoDB credentials if necessary.
 
 4. You can view the MongoDB collections locally using Mongo Express. To set up Mongo Express, update `ME_CONFIG_BASICAUTH_USERNAME` and `ME_CONFIG_BASICAUTH_PASSWORD`. The username and password will be the login credentials when you access Mongo Express at http://localhost:8083.
 
-## Running Question History Service without Docker
+## Running Question History Service Locally
 
-> Make sure you have the cloud MongoDB URI in your .env file and set NODE_ENV to production already.
+> Make sure you have the cloud MongoDB URI in your `.env` file and set `NODE_ENV` to `production` already.
 
 1. Open Command Line/Terminal and navigate into the `qn-history-service` directory.
 
 2. Run the command: `npm install`. This will install all the necessary dependencies.
 
 3. Run the command `npm start` to start the Question History Service in production mode, or use `npm run dev` for development mode, which includes features like automatic server restart when you make code changes.
 
+## Running Question History Service with Docker
+
+1. Open the Command Line/Terminal.
+
+2. Run the command `docker compose run qn-history-service` to start up the Question History Service and its dependencies.
+
 ## After running
 
 1. To view Question History Service documentation, go to http://localhost:3006/docs.
diff --git a/backend/question-service/.env.sample b/backend/question-service/.env.sample
@@ -1,21 +1,25 @@
 NODE_ENV=development
 SERVICE_PORT=3000
 
-FIREBASE_PROJECT_ID=<FIREBASE_PROJECT_ID>
-FIREBASE_PRIVATE_KEY=<FIREBASE_PRIVATE_KEY>
-FIREBASE_CLIENT_EMAIL=<FIREBASE_CLIENT_EMAIL>
-FIREBASE_STORAGE_BUCKET=>FIREBASE_STORAGE_BUCKET>
-
+# Origins for cors
 ORIGINS=http://localhost:5173,http://127.0.0.1:5173
 
+# Other service APIs
 USER_SERVICE_URL=http://user-service:3001/api
 
+# Firebase configuration
+FIREBASE_PROJECT_ID=<FIREBASE_PROJECT_ID>
+FIREBASE_PRIVATE_KEY=<FIREBASE_PRIVATE_KEY>
+FIREBASE_CLIENT_EMAIL=<FIREBASE_CLIENT_EMAIL>
+FIREBASE_STORAGE_BUCKET=<FIREBASE_STORAGE_BUCKET>
+
+# Tests
 MONGO_URI_TEST=mongodb://mongo:mongo@test-mongo:27017/
 
-# if using cloud MongoDB, replace with actual URI (run service separately)
+# If using cloud MongoDB, replace with actual URI (run service separately)
 MONGO_CLOUD_URI=<MONGO_CLOUD_URI>
 
-# if using local MongoDB (run service with docker-compose)
+# If using local MongoDB (run service with docker-compose)
 ## MongoDB credentials
 MONGO_INITDB_ROOT_USERNAME=root
 MONGO_INITDB_ROOT_PASSWORD=example
diff --git a/backend/question-service/README.md b/backend/question-service/README.md
@@ -8,20 +8,38 @@
 
 2. To connect to your cloud MongoDB instead of your local MongoDB, set the `NODE_ENV` to `production` instead of `development`.
 
-3. Update `FIREBASE_PROJECT_ID`, `FIREBASE_PRIVATE_KEY`, `FIREBASE_CLIENT_EMAIL`, `FIREBASE_STORAGE_BUCKET`, `MONGO_CLOUD_URI` with the env variables obtained from following the instructions in the backend README. Then update `MONGO_INITDB_ROOT_USERNAME`, `MONGO_INITDB_ROOT_PASSWORD` to change your MongoDB credentials if necessary.
+3. Update the following variables in the `.env` file:
+
+   - `FIREBASE_PROJECT_ID`
+
+   - `FIREBASE_PRIVATE_KEY`
+
+   - `FIREBASE_CLIENT_EMAIL`
+
+   - `FIREBASE_STORAGE_BUCKET`
+
+   - `MONGO_CLOUD_URI`
+
+   You can also update `MONGO_INITDB_ROOT_USERNAME`, `MONGO_INITDB_ROOT_PASSWORD` to change your MongoDB credentials if necessary.
 
 4. You can view the MongoDB collections locally using Mongo Express. To set up Mongo Express, update `ME_CONFIG_BASICAUTH_USERNAME` and `ME_CONFIG_BASICAUTH_PASSWORD`. The username and password will be the login credentials when you access Mongo Express at http://localhost:8081.
 
-## Running Question Service without Docker
+## Running Question Service Locally
 
-> Make sure you have the cloud MongoDB URI in your .env file and set NODE_ENV to production already.
+> Make sure you have the cloud MongoDB URI in your `.env` file and set `NODE_ENV` to `production` already.
 
 1. Open Command Line/Terminal and navigate into the `question-service` directory.
 
 2. Run the command: `npm install`. This will install all the necessary dependencies.
 
 3. Run the command `npm start` to start the Question Service in production mode, or use `npm run dev` for development mode, which includes features like automatic server restart when you make code changes.
 
+## Running Question Service with Docker
+
+1. Open the Command Line/Terminal.
+
+2. Run the command `docker compose run question-service` to start up the Question Service and its dependencies.
+
 ## Seeding questions into MongoDB
 
 1. With Docker
diff --git a/backend/user-service/.env.sample b/backend/user-service/.env.sample
diff --git a/backend/user-service/README.md b/backend/user-service/README.md
diff --git a/backend/user-service/src/config/redis.ts b/backend/user-service/src/config/redis.ts
diff --git a/docker-compose-test.yml b/docker-compose-test.yml
diff --git a/docker-compose.yml b/docker-compose.yml
diff --git a/frontend/src/components/QuestionCodeTemplates/index.tsx b/frontend/src/components/QuestionCodeTemplates/index.tsx
