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.

• Keyboard shortcuts.

• Sending and receiving text messages in real time.

• Sending and receiving images in real time.

• Instant notifications when submitting a form.

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

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

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

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

• Emojies support.

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

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

• The ability to render Markdown text.

• The ability to ban and unban room members.

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 git@github.com: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

Documentation

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

Contributors

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