Whiteboard App for Rocket.Chat

Enhance your collaborative experience with diagrams, drawings, and more using Whiteboard Integration in Rocket.Chat. Whiteboard App provides a seamless environment for real-time visual communication and brainstorming.

How to Use App

Create Whiteboard

Through Slash Commands:

Use /whiteboard new to create a new whiteboard.
Use /whiteboard help for a helper message.

Through Action Buttons:

Click on the "Create Whiteboard" action button to create a new whiteboard.

Using Whiteboard

Click on Edit board button and you will be directed to a new whiteboard tab.
User's edits will be stored in realtime as a image preview in the message.

Click on Settings button to modify boardname and make board public/private.

Whiteboard App Policies

Local Setup Guide

Join our community from here 💻🧑‍🤝‍🧑🚀.

Make sure you have a working Rocket.Chat server and Apps-Engine CLI for your machine. You can setup the server for your local machine from here and CLI from here.

Navigate to the client folder:
```
cd client
```
Install all required packages:
```
npm install
```
Build the webpack bundle for the Excalidraw React app:
```
npm run build
```
Execute the build.js script to generate build scripts for excalidraw.ts and excalidrawContent.ts:
```
npm run build:excalidraw
```
Change directory to whiteboard and install all Rocket chat app packages :
```
cd ../whiteboard/
```
```
npm install
```
Deploy your app locally
```
rc-apps deploy --url http://localhost:3000 --username ${username} --password ${password}
```
Your username and password are your local server's user credentials .Verify the successful build by accessing the /excalidraw endpoint in the Whiteboard app settings. You can access the React app through the provided URL.

GSoC'23 Work: Whiteboard App Report

Resources

Explore our documentation and engage with the Rocket.Chat Apps community:

Rocket.Chat Apps TypeScript Definitions Documentation: Learn about Rocket.Chat Apps TypeScript definitions and how to use them.
- Documentation
Rocket.Chat Apps TypeScript Definitions Repository: Contribute and explore the open-source repository for Rocket.Chat Apps TypeScript definitions.
- GitHub Repository
Example Rocket.Chat Apps: Find inspiration in a collection of example Rocket.Chat Apps, providing practical implementations.
- Example Apps
Community Forums: Engage with the Rocket.Chat Apps community through our forums.
Community Chat Channel: Join the conversation in our community chat channel.
- #rocketchat-apps on Open.Rocket.Chat

Feel free to explore, learn, and collaborate within the Rocket.Chat Apps ecosystem. Happy coding!

harsitagarwalla187/Apps.Whiteboard