https://github.com/ankush-nitjsr/whiteboard-app
Collaborative Whiteboard is a real-time web app that enables users to sketch and share ideas visually. With features like room-based sessions, customizable tools and real-time updates via Socket.IO, it fosters seamless teamwork. Built using React (TypeScript), Node.js and MySQL, this app delivers an intuitive & responsive collaborative platform.
https://github.com/ankush-nitjsr/whiteboard-app
mysql nodejs reactjs responsive-web-design socket-io typescript
Last synced: 3 months ago
JSON representation
Collaborative Whiteboard is a real-time web app that enables users to sketch and share ideas visually. With features like room-based sessions, customizable tools and real-time updates via Socket.IO, it fosters seamless teamwork. Built using React (TypeScript), Node.js and MySQL, this app delivers an intuitive & responsive collaborative platform.
- Host: GitHub
- URL: https://github.com/ankush-nitjsr/whiteboard-app
- Owner: Ankush-nitjsr
- Created: 2025-01-08T11:11:07.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-08T11:50:11.000Z (over 1 year ago)
- Last Synced: 2025-01-08T12:37:45.298Z (over 1 year ago)
- Topics: mysql, nodejs, reactjs, responsive-web-design, socket-io, typescript
- Language: CSS
- Homepage:
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Collaborative Whiteboard
Collaborative Whiteboard is a real-time whiteboard application that enables users to create rooms and collaborate visually with others. It fosters teamwork and creativity across distances through an intuitive and responsive interface.
## Features
- **Room Creation**: Create or join shared whiteboard sessions using a unique Room ID.
- **Real-Time Collaboration**: Sketch and collaborate with other users in real time.
- **Customizable Tools**: Adjust brush color and size for a personalized drawing experience.
- **Save and Load Sessions**: Save whiteboard sessions and reload them later to continue working.
## Tech Stack
- **Frontend**: React.js (TypeScript)
- **Backend**: Express.js, Node.js
- **Database**: PostgreSQL
- **Real-Time Communication**: Socket.IO
## Installation
Follow these steps to set up and run the application locally:
### Frontend
1. Navigate to the `client` directory:
```bash
cd client
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
### Backend
1. Navigate to the `server` directory:
```bash
cd server
```
2. Install dependencies:
```bash
npm install
```
3. Start the backend server:
```bash
node server.js
```
## Usage
1. Launch the frontend and backend servers.
2. Open the application in your browser.
3. Create or join a room by entering a Room ID.
4. Start collaborating in real time with others.