Custom Editor React

Welcome to the Custom Editor React project! This is a front-end implementation of a real-time collaborative text editor built with React.js. It integrates seamlessly with a backend powered by Node.js, Express, and Socket.IO to provide a live editing experience.

Back-End repository: https://github.com/BaseMax/editor-realtime-collaborative

Features

• Real-Time Collaboration: Multiple users can edit the same document simultaneously.
• Live Markdown Preview: Users can see rendered Markdown in real time.
• WebSocket Integration: Ensures instant synchronization between users.
• User Tracking: Displays the number of online users.
• Customizable Interface: Can be extended with themes, plugins, and additional features.
• React-Based Architecture: Ensures a modern and scalable front-end.

Technologies Used

• React.js - Front-end library for building UI components.
• TypeScript - Ensures type safety and better development experience.
• Socket.IO - Enables real-time communication with the backend.

Getting Started

Prerequisites

Ensure you have the following installed:

• Node.js (v16 or later)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/BaseMax/custom-editor-react.git
   cd custom-editor-react

2. Install dependencies:

   npm install  # or yarn install

3. Start the development server:

   npm run dev  # or yarn dev

   The development server will start on http://localhost:3000.

Project Structure

02/17/2025  04:02 PM               253 .gitignore
02/17/2025  06:10 PM           105,941 bun.lock
02/17/2025  04:02 PM               734 eslint.config.js
02/17/2025  04:05 PM               225 eslintrc.json
02/17/2025  04:02 PM               366 index.html
02/17/2025  03:58 PM             1,086 LICENSE
02/17/2025  04:45 PM    <DIR>          node_modules
02/17/2025  04:45 PM           127,528 package-lock.json
02/17/2025  06:10 PM               948 package.json
02/17/2025  04:02 PM    <DIR>          public
02/17/2025  04:02 PM             1,607 README.md
02/17/2025  05:30 PM    <DIR>          src
02/17/2025  04:02 PM               665 tsconfig.app.json
02/17/2025  04:02 PM               119 tsconfig.json
02/17/2025  04:02 PM               593 tsconfig.node.json
02/17/2025  04:02 PM               161 vite.config.ts

WebSocket Events

Event Name	Description
connection	Triggered when a user connects.
updateContent	Sends the latest content to clients.
contentChange	Updates content from a user.
onlineUsers	Notifies users of the current online count.
disconnect	Triggered when a user disconnects.

Contributing

Contributions are welcome! Feel free to:

• Submit issues.
• Open pull requests.
• Suggest new features.

License

This project is licensed under the MIT License.

Author

Seyyed Ali Mohammadiyeh (Max Base)

GitHub: @basemax

Email: maxbasecode@gmail.com

Happy Coding! 🚀