This is a submission for the KendoReact Free Components Challenge.
What I Built
a collaborative whiteboard application that allows multiple users to draw, annotate, and communicate in real-time. It includes features like:
Drawing tools (e.g., pencil, shapes, text, eraser).
Real-time collaboration using Socket.IO.
Undo/Redo functionality.
Export options (e.g., PNG, SVG, PDF).
Customizable hotkeys for quick actions.
Layer management for organizing drawings
Demo
https://real-time-collaboration-whiteboard.vercel.app/
https://github.com/Adonai-Technologies/Real-Time-Collaboration-Whiteboard
KendoReact Experience
n the Whiteboard Project, I used 12 KendoReact components to build the user interface and enhance functionality. Below is a list of the KendoReact components used, along with their purposes:
KendoReact Components Used
1. Button
(@progress/kendo-react-buttons)
Used for interactive buttons like "Undo," "Redo," "Export," and "Customize Hotkeys."
2. ColorPicker
(@progress/kendo-react-inputs)
Allows users to select stroke and fill colors for drawing tools.
3. Input
(@progress/kendo-react-inputs)
Used for text input fields, such as adding text to the canvas or customizing hotkeys.
4.NumericTextBox (@progress/kendo-react-inputs)
Allows users to input numeric values, such as brush size, text size, and grid size.
- Slider
(@progress/kendo-react-inputs)
Used for adjusting values like opacity, rotation angle, and shape scale.
- AppBar
(@progress/kendo-react-layout)
Provides a top navigation bar for the application, containing buttons and user avatars.
**
- Drawer **(@progress/kendo-react-layout)
Used for the side drawer that contains tools, settings, and hotkey customization.
- TileLayout
(@progress/kendo-react-layout)
Organizes tools and settings into a grid layout for easy access.
- TabStrip
(@progress/kendo-react-layout)
Provides tabs for switching between drawing, collaboration, and analytics views.
**
- Stepper **(@progress/kendo-react-layout)
Guides users through steps like "Start," "Draw," "Collaborate," and "Finish."
- Notification
(@progress/kendo-react-notification)
*- Chat *
(@progress/kendo-react-conversational-ui)
Enables real-time chat functionality for collaboration.
- Chart
(@progress/kendo-react-charts)
Displays analytics data (e.g., a line chart for drawing activity).
**
- Tooltip ** (@progress/kendo-react-tooltip)
Provides tooltips for buttons and other UI elements.
*- Loader *
(@progress/kendo-react-indicators)
Displays a loading spinner during asynchronous operations.
*- PDFExport *
(@progress/kendo-react-pdf)
Allows users to export the whiteboard as a PDF.
- Animation
(@progress/kendo-react-animation)
Adds animations to UI elements (e.g., fade-in effects for buttons).
Displays notifications for events like user joins or errors.
