SyncFlow is an one-to-one real-time collaborative web application designed for programmers and developers. It allows users to create and discuss Low-Level Designs (LLD), algorithms, and flowcharts on a shared canvas with real-time updates and seamless interaction. It also provides cloud-based design snap sharing.
β¨ Features
-
Real-Time Collaboration: Design and chat with another developer in real-time.
-
Interactive Chat: Communicate seamlessly within the app.
-
Canvas Screenshot Capture: Capture and upload canvas snapshots to Cloudinary.
-
Responsive Design: Designed with MUI and Tailwind CSS for a responsive UI.
-
Optional Authentication: Secure user authentication for personalized access (optional).
π Technologies Used
-
Frontend: React, MUI, Tailwind CSS
-
Backend: Node.js, Express.js, Socket.IO
-
Cloud Storage: Cloudinary
-
Other Tools: HTML5 Canvas API, JWT
π οΈ Getting Started
Prerequisites
-
Node.js installed on your local machine
-
npm or yarn package manager
Installation
- Clone the repository:
git clone https://github.com/ctrly4sh/Sync-Canvas.git cd Sync-Canvas
- Install dependencies:
npm install
- Set up environment variables:
- Create a
.env
file in the root directory. - Add your Cloudinary credentials and other necessary variables.
- Start the development server:
npm start
- Open your browser:
- Navigate to
http://localhost:3000
to view the app.
π― Usage
-
Register/login to access the canvas.
-
Draw on the canvas using the tools provided.
-
Chat with the other user in real-time.
-
Use the "Capture & Upload" button to save canvas snapshots to Cloudinary.
π€ Contributing
Contributions are welcome! Feel free to fork the repository and submit pull requests.
π License
This project is licensed under the GNU License.
π§ Contact y4sh.dev