User authentication

README.md

@@ -1,36 +1,83 @@
-# collab-sketch
+ # Collab-Sketch
 
-This template should help get you started developing with Vue 3 in Vite.
+Collab-Sketch a real-time collaborative whiteboard application using Vue.js, Node.js, Redis, and WebSockets. Users can draw, add text, and insert images on a shared canvas in real-time. This project demonstrates proficiency in real-time collaboration and WebSockets.
 
-## Recommended IDE Setup
+## Features
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+- Real-time drawing on a collaborative canvas.
+- Text insertion with synchronization between users.
+- Image insertion through URL with synchronized updates.
+- WebSocket-based communication for seamless real-time collaboration.
+- Redis integration for handling data synchronization between users.
 
-## Customize configuration
+### Prerequisites
 
-See [Vite Configuration Reference](https://vitejs.dev/config/).
+- Node.js and npm: Make sure you have Node.js and npm (Node Package Manager) installed on your machine.
 
-## Project Setup
+## Getting Started
 
-```sh
-npm install
-```
+Follow these steps to set up and run both the frontend and backend of the Collab-Sketch application.
 
-### Compile and Hot-Reload for Development
+### Frontend
+1. Navigate to the frontend directory:
 
-```sh
-npm run dev
-```
+   ```bash
+   cd collab-sketch-frontend
+   ```
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+3. Start the frontend development server:
+   ```bash
+   npm run serve
+   ```
+- Open your web browser and go to http://localhost:8080 to access the Collab-Sketch frontend.
 
-### Compile and Minify for Production
+### Backend
+1. Navigate to the backend directory:
 
-```sh
-npm run build
-```
+   ```bash
+   cd collab-sketch-backend
+   ```
 
-### Lint with [ESLint](https://eslint.org/)
+2. Install dependencies:
+
+   ```bash
+   npm install
+   ```
+
+3. Start the backend server:
+
+   ```bash
+   node server.js
+   ```
+
+- The backend server will now be running and listening for WebSocket connections.
+
+
+
+## Usage
+
+1. Open your web browser and navigate to the provided Vue.js development server URL (`http://localhost:8080`).
+2. Collaborate with other users by drawing, adding text, and inserting images in real time on the whiteboard canvas.
+3. Changes made by one user will be instantly reflected on the canvas of other connected users.
+
+## Technologies Used
+
+- Vue.js: Frontend JavaScript framework.
+- Node.js: Backend JavaScript runtime.
+- Express: Web application framework for Node.js.
+- WebSocket: Real-time communication protocol.
+- Redis: In-memory data store for data synchronization.
+- HTML5 Canvas API: Drawing functionality on the frontend.
+
+## License
+
+This project is licensed under the [MIT License](LICENSE).
+
+## Acknowledgements
+
+- This project was inspired by the need for real-time collaborative tools and was developed as a learning exercise.
+- Thanks to the open-source communities behind Vue.js, Node.js, Redis, and Socket.io for providing the tools and resources necessary for this project.
 
-```sh
-npm run lint
-```
-# collaboration-sketch

collab-sketch-backend/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+/node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?