Real Time Whiteboard is a collaborative web-based tool where multiple users can join a session and collaborate on work in real time. Users can also create their own private boards to work individually. The project is built with Keycloak for authentication, React for the front-end, and WebSocket for real-time collaboration.
- Real-time Collaboration: Multiple users can join the same whiteboard session and draw, add notes, and interact with the board in real time.
- Private Workspace: Users can work individually on their own private whiteboards.
- User Authentication: Secure login and logout functionality using Keycloak.
- Session Management: Users can create, join, and leave whiteboard sessions.
- Responsive Design: Fully responsive interface to work across all screen sizes.
- Frontend: React
- Authentication: Keycloak
- Real-time Communication: WebSockets
- Backend: Node.js (or any backend of choice for managing WebSocket connections)
- State Management: Context API
-
Clone the repository:
git clone https://github.com/your-username/realtime-whiteboard.git cd realtime-whiteboard -
Install dependencies:
npm install
-
Set up environment variables:
Create a
.envfile in the root directory and add the following:VITE_KEYCLOAK_URL=http://localhost:8080/ VITE_KEYCLOAK_REALM=myRealm VITE_KEYCLOAK_CLIENT_ID=myClient VITE_BACKEND_URL=http://localhost:3000
-
Start the development server:
npm run dev
both for frontend and backend in there respective folders
-
This will launch the app.
This project uses Keycloak for authentication. Follow these steps to set up Keycloak for the application:
-
Install Keycloak: Follow the official Keycloak installation guide to install it on your system.
-
Create a Realm: In the Keycloak admin console, create a realm to manage users.
-
Create a Client: Under the new realm, create a client application with the following settings:
- Client Protocol:
openid-connect - Access Type:
public - Valid Redirect URIs:
http://localhost:3000/*
- Client Protocol:
-
Get Client Details: Copy the client ID, Keycloak URL, and realm name into the
.envfile.
-
Login: Users can log in using the secure Keycloak authentication. Upon login, they will be redirected to the whiteboard dashboard.
-
Create or Join Session: Users can create a new session or join an existing one by entering a session ID.
-
Collaborate: In real-time, users can draw, type, and collaborate on a shared whiteboard. The WebSocket connection ensures real-time synchronization.
-
Private Boards: Users can also work on their private boards without sharing with others.
-
Logout: Clicking the "Logout" button will securely log the user out of the application and invalidate their session.
The WebSocket connection ensures real-time updates to all connected users. Here's an overview of how it's structured:
- Backend (Node.js): Handles WebSocket connections and broadcasts whiteboard updates to all connected clients.
- Frontend (React): Listens for WebSocket events and updates the board in real time when a user performs an action (e.g., drawing, erasing).
- Chat Functionality: Add a real-time chat feature for better collaboration.
- Audio/Video Integration: Allow users to communicate via audio or video while collaborating on the whiteboard.
- Versioning: Allow users to save and revisit different versions of a whiteboard.
- Export Feature: Add the ability to export whiteboard content as images or PDFs.
Contributions are welcome! If you'd like to contribute to the project, please follow these steps:
- Fork the project.
- Create a new branch.
- Commit your changes.
- Open a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.
This README.md file gives a comprehensive overview of this project, including installation, setup, usage, and future plans, all while following best practices for open-source projects.