Klustr is a chat application that allows users to communicate in rooms. Rooms can be public or private. Users can join rooms, send messages, and participate in audio/video chats. The application includes features like message persistence, room management, and profile editing.
Before you begin, ensure you have met the following requirements:
- You have installed Node.js and npm.
- You have a basic understanding of React, Tailwind CSS, .NET, and PostgreSQL.
- You have a PostgreSQL database setup.
- React
- SignalR
- WebRTC (peer.js)
- Tailwind CSS
- React Router
- Clone the repository:
git clone https://github.com/Klustr-RTC/klustr-web.git
- Navigate to the project directory:
cd klustr-web
- Install the dependencies:
npm install
- Create a
.env.local
file in the root directory and add the environment variables as mentioned in thevite-env.d.ts
file insrc
directory. - Start the development server:
npm run dev
- Open http://localhost:5173 in your browser to view the application.
-
Authentication:
- User registration and login with JWT.
-
Room Management:
- Create rooms (public or private).
- Manage room members and permissions.
- Delete rooms created by the user.
- Generate shareable links for rooms, which can be regenerated to invalidate the old link.
-
Join Room:
- Join rooms from the home page by clicking on room cards and filtering rooms.
- Join rooms using a shareable link (no join code required if the link is valid).
- Private rooms require a join code for access.
-
Messaging:
- Send and receive messages in chat rooms.
- Option to save messages to the database or keep them in local storage.
- Timestamps displayed for each message using
react-timeago
.
-
Audio/Video Chat:
- Join audio/video rooms and interact with other participants.
- Enable/disable camera and microphone.
- Integrated chat functionality within audio/video rooms.
- WebRTC for audio/video communication.
- SignalR for real-time communication.
-
Profile Management:
- View and edit user profile.
- View rooms created by the user.
-
Filtering and Searching:
- Filter rooms based on visibility (public/private), type (chat/audio-video), name, and description.
For inquiries or support, please contact: