feat: dockerized the whole project

README.md

@@ -87,6 +87,45 @@ collab-canvas/
 ## 🚀 Getting Started
 
 Follow these steps to set up and run the project locally.
+- **Option 1: Docker (Recommended)** – The simplest way to get running with a single command.  
+- **Option 2: Manual Setup** – The traditional way if you want to manage the services yourself.
+
+## Option 1: Run with Docker (Recommended) 🐳
+
+This method starts the **client**, **server**, and a **MongoDB database** all at once.  
+You do **not** need Node.js or MongoDB installed on your machine.
+### Prequisites: you must have docker desktop installed and running 
+
+### Clone the Repository
+
+```bash
+git clone https://github.com/your-username/collab-canvas.git
+cd collab-canvas
+```
+
+### Run with Docker Compose
+
+```bash
+docker-compose up --build
+```
+
+Docker will build the images and start all three containers.
+
+Your application is now running:
+
+Frontend Client: http://localhost:3000
+
+Backend Server: http://localhost:5000
+
+MongoDB Database: Accessible to the server at mongodb://db:27017
+
+Note: The first build may take a few minutes. Subsequent builds will be faster.
+To stop all services, press Ctrl + C in your terminal, then run:
+```bash
+docker-compose down
+```
+
+## Option 2
 
 ### Prerequisites
 

client/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+.env

client/Dockerfile

@@ -0,0 +1,7 @@
+FROM node:20-alpine
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+EXPOSE 5173
+CMD ["npm", "run", "dev", "--", "--host"]

client/src/components/StrokeControl.jsx

@@ -1,5 +1,4 @@
-import { Slider } from "./ui/slider";
-
+import { Slider } from "./ui/Slider";
 export const StrokeControl = ({ strokeWidth, onStrokeWidthChange }) => {
     return (
         <div className="fixed right-6 top-1/2 -translate-y-1/2 z-50">

docker-compose.yml

@@ -0,0 +1,32 @@
+version: '3.8'
+
+services:
+
+  client:
+    build: ./client
+    ports:
+      - "3000:5173"
+    depends_on:
+      - server
+
+  server:
+    build: ./server
+    ports:
+      - "${SERVER_PORT:-5000}:5000"
+    environment:
+      PORT: 5000
+      CORS_ORIGIN: ${CORS_ORIGIN:-http://localhost:3000}
+      MONGO_URI: ${MONGO_URI:-mongodb://db:27017/collabcanvas}
+      JWT_SECRET: ${JWT_SECRET:-THIS_IS_A_DEFAULT_NOT_A_SECRET}
+    depends_on:
+      - db
+
+  db:
+    image: mongo:latest
+    ports:
+      - "27017:27017"
+    volumes:
+      - mongo-data:/data/db
+
+volumes:
+  mongo-data:

server/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+.env

server/.env.example

@@ -0,0 +1,4 @@
+PORT=3000
+MONGO_URI=your_mongodb_connection_string_here
+CORS_ORIGIN=http://localhost:5173
+JWT_SECRET=your_jwt_secret_here

server/Dockerfile

@@ -0,0 +1,8 @@
+FROM node:20-alpine
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install
+COPY . .
+EXPOSE 5000
+CMD ["npm", "run", "dev"]