Giter Club home page Giter Club logo

Brave Chat

Demo on Cloudflare Status Tag Docs All Contributors

Brave Chat

Brave Chat is a fully featured chat application developed to bring the power back to people. It's designed to be the ultimate open source slack alternative with privacy in mind. It is user-friendly with a clean interface that is easy to navigate.

As well as being feature-rich, Brave Chat is also fully responsive, meaning it will work seamlessly on a wide range of devices. So whether you're chatting on your desktop or your mobile, you'll always have a great experience.

Supported Features

  • Forms validations.

Email validation.

Email validation.

  • Keyboard shortcuts.

Keyboard shortcuts.

  • Sending and receiving text messages in real time.

Sending and receiving text messages.

  • Sending and receiving images in real time.

Sending and receiving images.

  • Instant notifications when submitting a form.

Joining a room notification.

add contact notification.

  • Adding and removing a contact using an email address of a registered user.

Add contact form.

  • Display chat list with unread messages count as a badge and timestamps.

Custom badges, unread messages count, and timestamps.

  • Joining and creating rooms given a room name and or description.

Create room form.

  • The ability to click on an avatar in a room to reveal detailed information about a given user.

Room User Details.

  • Emojies support.

Emojies support.

  • The ability to leave a room, and delete sent messages.

Delete messages.

Deleted messages.

  • The ability to render HTML tags, links, emails.

HTML tags being rendered.

  • The ability to render Markdown text.

HTML tags being rendered.

  • The ability to ban and unban room members.

HTML tags being rendered.

2023 Roadmap

  • Enrypt and decrypt text messages on the client side using the signal protocol.
  • Add support for voice, videos, files messages.
  • Add support for voice and video calls.

Components

Brave Chat code base is written to be developer-friendly, with code that is both standards-compliant and optimised for performance. It contains a handful list of reusable components. You can take a look at various components in this section of the docs, or expand the following collapsed section.

tree src 
├── 📂 src
│
│   │
│   ├── 📂 components
│   │
│   │   ├──  📂 AddContact
│   │   │
│   │   │    ├── 📄 index.js
│   │   │    └── 📄 style.css
│   │   │
│   │   ├──  📂 AddRoom
│   │   │
│   │   │    ├── 📄 index.js
│   │   │    └── 📄 style.css
│   │   │
│   │   ├──  📂 AppTextInput
│   │   │ 
│   │   │    └── 📄 index.js
│   │   │
│   │   ├──  📂 ChatContainer
│   │   │
│   │   │    └── 📄 index.js
│   │   │
│   │   ├──  📂 ChatFooter
│   │   │
│   │   │    ├── 📄 index.js
│   │   │    └── 📄 style.css
│   │   │
│   │   ├──  📂 ContentHeader
│   │   │
│   │   │    └── 📄 index.js
│   │   │
│   │   ├──  📂 ContentLoader
│   │   │
│   │   │    └── 📄 index.js
│   │   │
│   │   ├──  📂 Conversation
│   │   │
│   │   │    ├── 📄 index.js
│   │   │    │
│   │   │    ├── 📂 ReceivedMessageCell
│   │   │    │
│   │   │    │   ├── 📄 index.js
│   │   │    │   └── 📄 TypingMessage.js
│   │   │    │
│   │   │    ├── 📂  SentMessageCell
│   │   │    │
│   │   │    │   └── 📄 index.js
│   │   │    │
│   │   │    └── 📄 style.css
│   │   │
│   │   ├──  📂 CustomAlert
│   │   │
│   │   │    ├── 📄 index.js
│   │   │    └── 📄 style.css
│   │   │
│   │   ├──  📂 CustomAvatar
│   │   │
│   │   │    ├── 📄 index.js
│   │   │    └── 📄 style.css
│   │   │
│   │   ├──  📂 CustomCarousel
│   │   │
│   │   │    ├── 📄 index.js
│   │   │    └── 📄 style.css
│   │   │
│   │   ├──  📂 CustomImage
│   │   │
│   │   │    └── 📄 index.js
│   │   │
│   │   ├──  📂 CustomList
│   │   │
│   │   │    ├── 📄 index.js
│   │   │    ├── 📄 ListEmptyResult.js
│   │   │    ├── 📄 ListFooter.js
│   │   │    ├── 📄 ListView.js
│   │   │    └── 📄 style.css
│   │   │
│   │   ├──  📂 CustomPassword
│   │   │
│   │   │    ├── 📄 index.js
│   │   │    └── 📄 style.css
│   │   │
│   │   ├──  📂 CustomTextInput
│   │   │
│   │   │    └── 📄 index.js
│   │   │
│   │   ├──  📂 DropdownMenu
│   │   │
│   │   │    └── 📄 index.js
│   │   │
│   │   ├──  📂 EditInfo
│   │   │
│   │   │    ├── 📄 index.js
│   │   │    └── 📄 style.css
│   │   │
│   │   ├──  📂 EmojiPicker
│   │   │
│   │   │    └── 📄 index.js
│   │   │
│   │   ├──  📂 GridContainer
│   │   │
│   │   │    └── 📄 index.js
│   │   │
│   │   ├──  📂 Helper
│   │   │
│   │   │    └── 📄 index.js
│   │   │
│   │   ├──  📂 MediaViewer
│   │   │
│   │   │    ├── 📄 index.js
│   │   │    └── 📄 style.css
│   │   │
│   │   ├──  📂 PageLoader
│   │   │
│   │   │    ├── 📄 index.js
│   │   │    └── 📄 style.css
│   │   │
│   │   ├──  📂 RoomContentHeader
│   │   │
│   │   │    └── 📄 index.js
│   │   │
│   │   ├──  📂 RoomConversation
│   │   │
│   │   │    ├── 📄 index.js
│   │   │    │
│   │   │    ├── 📂 ReceivedMessageCell
│   │   │    │
│   │   │    │   ├── 📄 index.js
│   │   │    │   └── 📄 TypingMessage.js
│   │   │    │ 
│   │   │    ├── 📂 SentMessageCell
│   │   │    │  
│   │   │    │   └── 📄 index.js
│   │   │    │
│   │   │    └── 📄 style.css
│   │   │
│   │   ├──  📂 Sidebar
│   │   │
│   │   │    ├── 📂 ChatUserCell
│   │   │    │
│   │   │    │   └── 📄 index.js
│   │   │    │
│   │   │    ├── 📂 ChatUserList
│   │   │    │ 
│   │   │    │   └── 📄 index.js
│   │   │    │
│   │   │    ├── 📂 ContactCell
│   │   │    │ 
│   │   │    │   └── 📄 index.js
│   │   │    │ 
│   │   │    ├── 📂 ContactList
│   │   │    │ 
│   │   │    │   └── 📄 index.js
│   │   │    │  
│   │   │    ├── index.js
│   │   │    │ 
│   │   │    ├── 📂 NoRecordFound
│   │   │    │ 
│   │   │    │   ├── 📄 index.js
│   │   │    │   └── 📄 style.css
│   │   │    │ 
│   │   │    ├── 📂 ProfileDetail
│   │   │    │ 
│   │   │    │   └── 📄 index.js
│   │   │    │    
│   │   │    ├── 📂 RoomCell
│   │   │    │ 
│   │   │    │   └── 📄 index.js
│   │   │    ├── 📂 RoomList
│   │   │    │ 
│   │   │    │   └── 📄 index.js
│   │   │    │ 
│   │   │    ├── 📂 SidebarHeader
│   │   │    │  
│   │   │    │   └── 📄 index.js
│   │   │    │  
│   │   │    ├── 📄 style.css
│   │   │    │ 
│   │   │    └── 📂 UserStatus
│   │   │ 
│   │   │        └── 📄 index.js
│   │   │ 
│   │   ├── 📂 SignIn
│   │   │ 
│   │   │   ├── 📄 index.js
│   │   │   └── 📄 style.css
│   │   │ 
│   │   ├── 📂 SignUp
│   │   │ 
│   │   │   └── 📄 index.js
│   │   │ 
│   │   ├── 📄 style.css

Running locally with NPM

Note
Make sure you have pnpm installed on your machine.

  1. Fork/Clone the repo:

    git clone [email protected]:brave-chat/brave-chat.git

  2. Open the newly created directory:

    cd brave-chat
pnpm install

Warning
In order to run the project locally or build for production use, you will need to set the following environment variables to connect with the server.

REACT_APP_SERVER_URL=http://localhost:8000/api/v1
REACT_APP_SOCKET_URL=ws://localhost:8000/api/v1/ws

  1. Now, you can run the client:

    pnpm run dev

  2. Navigate to http://localhost:3000 to explore the landing page.

Running locally with Compose v2

Navigate to the server repository and follow the instructions listed in this section to run both the client and the server in docker containers.

Deployment

Warning
To deploy the client, you will need to set the following environment variables that help the client connect to the server.

* REACT_APP_SERVER_URL - Your deployed server APIs url.
* REACT_APP_SOCKET_URL - Your deployed server Sockets url.

Deploy to a Static Hosting Provider

CloudFlare

  1. Install Wrangler CLI:

    To get started with Cloudflare Workers, you'll need to install the Wrangler CLI, which is a powerful tool for managing your deployments. Open up your command-line interface and enter the following command to globally install Wrangler:

    npm install -g wrangler

  2. Login to Cloudflare Account from the CLI:

    To seamlessly interact with your Cloudflare account, you'll need to log in using Wrangler. Run the following command in your terminal:

    wrangler login

  3. Configure Environment Variables for Client-Server Connection:

    For your React app to communicate effectively with the server, you need to set a couple of environment variables. Replace the placeholders with actual URLs:

    export REACT_APP_SERVER_URL=Your_deployed_server_APIs_url
export REACT_APP_SOCKET_URL=Your_deployed_server_Sockets_url

  4. Run Your Build Command:

    Before deployment, ensure your project is finely tuned. Execute your build command to prepare your app for the world:

    pnpm run build

  5. Create a New Deployment:

    The moment has come to launch your creation into the online realm! Execute the following command to deploy your app with Wrangler Pages:

    wrangler pages deploy dist

Netlify

Deploy on Netlify

Documentation

You can refer to the official documentation for additional guides, examples, and APIs.

Contributors

Mahmoud Harmouch
Mahmoud Harmouch
🚧		 Andrew Koo
Andrew Koo
💻		 Princewill Asotibe
Princewill Asotibe
💻
Add your contributions

Brave Chat's Projects

brave-chat icon brave-chat

The ultimate slack alternative built with React, MUI, Redux, and friends.

brave-chat-server icon brave-chat-server

Brave Chat server powered by FastAPI, SQLAlchemy, Redis, SingleStoreDB and friends.

redis-server icon redis-server

The initial server of brave-chat powered by FastAPI, and Redis as a database.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.