Collabor8n is a real-time, collaborative whiteboard platform that enables teams to draw, take notes, chat, and brainstorm together. Built using React, Node.js, Express, and MongoDB, Collabor8n provides an intuitive and interactive experience for users to collaborate effectively.
You can see a live demo of Collabor8n at https://whiteboard.ericwli.com
- Real-time drawing and collaboration using WebSockets via socket.io
- Chat functionality
- User authentication using JSON Web Tokens (JWT)
- API service to save whiteboard drawings and manage sharing
- Dashboard to see all of your saved drawings
- React
- Node.js
- Express
- MongoDB
- Socket.io
- Material UI
To setup the project on your local machine, follow these instructions
- Clone the repository and navigate to the project directory
git clone https://github.com/EricWLi/Collabor8n.git
cd Collabor8n
- Install the required NPM packages
npm install
- Create a .env file with the following environment variables.
If you are using MongoDB Atlas, this guide will show you how to find your connection string. Your JWT secret key should be 256 bits or larger.
MONGO_CONN="<mongodb-connection-string>"
JWT_SECRET="<jwt-secret-key>"
PORT=<port>
- Build the React web application
npm run build
- Start the Node.js/Express server
npm start
- You should be able to access Collabor8n locally from the port that you defined in your environment variables.