snowden-fu / Apps.Whiteboard

Whiteboard Integration App for Rocket.Chat

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.

Whiteboard

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.

Action button

Using Whiteboard

  • Click on Edit board button and you will be directed to a new whiteboard tab. image

  • User's edits will be stored in realtime as a image preview in the message.

Image 1 Image 2
  • Click on Settings button to modify boardname and make board public/private. image

Whiteboard App Policies

Local Setup Guide

  1. Navigate to the client folder:

    cd client
  2. Install all required packages:

    npm install
  3. Build the webpack bundle for the Excalidraw React app:

    npm run build
  4. Execute the build.js script to generate build scripts for excalidraw.ts and excalidrawContent.ts:

    npm run build:excalidraw
  5. Change directory to whiteboard and install all Rocket chat app packages :

    cd ../whiteboard/
    npm install
  6. Deploy your app locally

    rc-apps deploy --url http://localhost:3000 --username ${username} --password ${password}

    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.

  • Rocket.Chat Apps TypeScript Definitions Repository: Contribute and explore the open-source repository for Rocket.Chat Apps TypeScript definitions.

  • Example Rocket.Chat Apps: Find inspiration in a collection of example Rocket.Chat Apps, providing practical implementations.

  • Community Forums: Engage with the Rocket.Chat Apps community through our forums.

  • Community Chat Channel: Join the conversation in our community chat channel.

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

About

Whiteboard Integration App for Rocket.Chat


Languages

Language:TypeScript 93.0%Language:SCSS 4.3%Language:JavaScript 2.7%Language:HTML 0.1%Language:CSS 0.0%