RayenTellissy / Wavecord

Chatting App heavily inspired by Discord made with React and Node.js, allowing users to create servers, talk in real-time via text or voice.
https://wavecord.netlify.app
9 stars 1 forks source link
app chakra-ui chat clone discord express firebase framer-motion javascript jwt livekit moment nodejs postgresql prisma react socket-io vite

Wavecord 🌊

Wavecord is built with React and Node.js, allowing users to add friends, chat with them, and create servers for voice and text communication with a community of people.

Table of Contents

Features πŸš€

  1. User Authentication πŸ§‘β€πŸ’»: Users can create accounts, log in, and log out securely.

  2. Friend Management πŸ‘«: Users can add friends by searching for their usernames or email addresses. They can also accept or decline friend requests.

  3. Chatting πŸ’¬: Users can send text messages to their friends, either individually or in group chats. Real-time messaging ensures quick and efficient communication.

  4. Server Creation 🏰: Users can create servers and invite friends to join them. Each server can have multiple text channels for different topics.

  5. Voice Chat πŸŽ™οΈ: Servers support voice chat rooms, allowing users to have real-time audio conversations with others.

  6. Role-Based Permissions πŸ›‘οΈ: Server owners can assign roles to users with specific permissions, giving them control over the server's features.

  7. Customization 🎨: Users can customize their profiles, including changing avatars, nicknames, and personal status messages.

  8. Notification System πŸ“’: Users receive notifications for friend requests, messages, and other important events.

Installation πŸ› οΈ

Wavecord doesn't need to be installed; you can access it freely at wavecord.netlify.app. Simply open your web browser and navigate to the provided URL to start using Wavecord.

If you would like to contribute to the development of Wavecord, please refer to the Contributing section for instructions on how to help with the development.

Usage πŸ“–

Using Wavecord is straightforward and user-friendly. Follow these steps to get started:

  1. Access the Application 🌐: Open your web browser and navigate to wavecord.netlify.app.

  2. Account Creation and Login ✍️:

    • If you're a new user, click on the "Sign Up" button to create a new account. Fill in the required information, such as your username, email, and password.
    • If you already have an account, click on the "Log In" button and provide your credentials.
  3. Home πŸ“Š:

    • Upon successful login, you'll be taken to the homepage where you can see your friends, servers, and recent messages.
  4. Adding Friends πŸ‘₯:

    • To add friends, click on the "Friends" tab in the topbar. You can search for friends by their usernames and send them friend requests.
    • Accept or decline friend requests from other users by going to the "Friends" tab and managing your pending requests.
  5. Chatting πŸ’¬:

    • Press on the create DM button to open a chat window. You can send text messages in real-time.
    • For group chats or server channels, navigate to the respective server and channel and start chatting with others.
  6. Server Creation and Voice Chat πŸ—£οΈ:

    • To create a server, click on the "Servers" tab in the sidebar. Give your server a name and invite friends to join.
    • Inside a server, you can access text channels for text communication and voice channels for real-time voice chat.
  7. Customization πŸ–ŒοΈ:

    • Customize your profile by clicking the user settings button. You can change your avatar and update your personal information.
  8. Notifications πŸ””:

    • Keep an eye on notifications. You'll receive notifications for friend requests, messages, and other important events.

Enjoy using Wavecord for seamless communication with your friends and communities!

Contributing 🀝

We appreciate your help in improving Wavecord by reporting any bugs you encounter. To report a bug, please follow these steps:

  1. Bug Reporting πŸ›:

    • If you come across a bug or issue while using Wavecord, you can help with the development by reporting it.
    • Click on the "Report Bug" button located at the bottom right of the application interface.
  2. Provide Details πŸ“:

    • In the bug report form, provide as much information as possible about the issue you encountered.
    • Describe the steps to reproduce the bug, including any specific actions you took before it occurred.
    • Include any error messages or unexpected behaviors you observed.
  3. Submit the Report πŸš€:

    • After completing the bug report form, click the "Submit" button to send the report to our development team.

Our team will review your bug report and work on addressing the issue as quickly as possible. Your feedback is invaluable in helping us maintain and improve Wavecord.

Thank you for helping us make Wavecord a better platform for everyone! πŸ™Œ