readme v3.1

Author: Mohitur669

README.md

@@ -16,11 +16,18 @@ Are you tired of sending code snippets back and forth, struggling to debug and c
 
 ### Prerequisites
 
+#### For running via Docker
+
+- Docker (25.0.4)
+- Docker Compose (1.29.2)
+
+#### For running locally
+
 - Node.js (v20.11.1)
 - npm (10.2.4)
 - pm2 (5.3.1) : `npm i -g pm2`
 
-I have used nvm (v0.39.7) to manage my node versions. View nvm official [documentation](https://github.com/nvm-sh/nvm) to install it.
+**Note:** I have used nvm (v0.39.7) to manage my node versions. View nvm official [documentation](https://github.com/nvm-sh/nvm) to install it.
 
 ## Tech Stack
 
@@ -31,23 +38,48 @@ I have used nvm (v0.39.7) to manage my node versions. View nvm official [documen
 - CodeMirror
 - React-Toastify
 
-## Run Locally
+## Installation
 
-This project is not currently live on any server. But to use the demo version, follow the steps below:
+### Running via Docker Image (highly recommended)
 
-- Clone this repository and cd into it
-- Run `npm install` to install the dependencies
-- To start the react app client run `npm start` in one terminal
-- To start the server run `npm server:dev` or `pm2 start server.js` in another terminal
-- Go to `http://localhost:3000` to view the app
-- Create a room by clicking on the `create new room` button and put a username of your choice
-- Copy the room id by clicking on the `Copy ROOM ID` button
-- To join as an another user open another browser/browser-window or an incognito tab and go to `http://localhost:3000`
-- Enter the same room id to join the same room
+To run the docker image, follow the steps below:
+
+1. Install [Docker](https://www.docker.com/) on your machine.
+2. Pull the docker image from the docker hub by running `docker pull mohitur/code-editor`
+3. Run the docker image by running `docker run -p 8000:8000 -p 3000:3000 -p 5000:5000 mohitur/code-editor`
+4. Go to `http://localhost:3000` to view the app
+5. Create a room by clicking on the `create new room` button and put a username of your choice
+   5 . Copy the room id by clicking on the `Copy ROOM ID` button
+6. To join as an another user open another browser/browser-window or an incognito tab and go to `http://localhost:3000`
+7. Enter the same room id to join the same room
 
 Now both your editor will be synced and you can see the changes in real time. Try opening the same room in multiple browsers/browsers-windows and see the changes.
 
-**Note:** To stop your server (only if you used pm2) run `pm2 stop server.js` in the terminal
+**Note:** If you are using docker in wsl2/linux then add `sudo` before the docker commands.
+
+### Running via building your own Docker Image
+
+To run the app using docker, follow the steps below:
+
+1. Install [Docker](https://www.docker.com/) on your machine.
+2. Clone the project repository and Navigate to the project directory.
+3. Also you have to change ENV values in the Dockerfile
+4. Replace your username in docker-compose.yml file.
+5. Run the Docker Compose command: `docker-compose up -d`
+6. Go to `http://localhost:3000` to view the app
+7. Follow the steps 5-7 from the [Running via Docker Image](https://github.com/Mohitur669/Realtime-Collaborative-Code-Editor?tab=readme-ov-file#running-via-docker-image) section to create and join a room
+
+### Running Locally
+
+1. Clone this repository and cd into it
+2. Run `npm install` to install the dependencies
+3. Create .env file in the root folder and copy paste the content of example.env, and add necessary credentials.
+4. To start the react app client run `npm start` in one terminal
+5. To start the server run `npm server:dev` or `pm2 start server.js` in another terminal
+6. Go to `http://localhost:3000` to view the app
+7. Follow the steps 4-7 from the [Running via Docker Image](https://github.com/Mohitur669/Realtime-Collaborative-Code-Editor?tab=readme-ov-file#running-via-docker-image) section to create and join a room
+
+**Note:** To stop your server, press `Ctrl+c` or if you used "pm2", then use `pm2 stop server.js` in the terminal.
 
 ## Project Video
 
@@ -63,6 +95,7 @@ In case you want to fix it yourself, feel free to make a pull request.
 3. [x] Added support for saving the last theme and language selected by the user in local storage
 4. [ ] Add support to accept or reject new users trying to join the room
 5. [ ] Add to implement video and voice chat feature inside the editor
+6. [ ] Add support for local code file uploading
 
 ## Open Source Contribution