Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/msanvarov/chatr-messenger
:bento: A React chat app is built with Nx, Redux, and Firebase.
https://github.com/msanvarov/chatr-messenger
bootstrap chat chat-application chatroom firebase react reactstrap redux redux-toolkit
Last synced: about 1 month ago
JSON representation
:bento: A React chat app is built with Nx, Redux, and Firebase.
- Host: GitHub
- URL: https://github.com/msanvarov/chatr-messenger
- Owner: msanvarov
- Created: 2020-10-07T03:26:17.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-09-05T19:16:21.000Z (over 1 year ago)
- Last Synced: 2024-10-11T02:53:19.294Z (2 months ago)
- Topics: bootstrap, chat, chat-application, chatroom, firebase, react, reactstrap, redux, redux-toolkit
- Language: SCSS
- Homepage: https://react-chatr.web.app/
- Size: 4.54 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Chatr Messenger
A messaging platform built with React, Firebase and Reactstrap (Bootstrap v5).
Table of Contents:
1. [Description](#-description)
2. [Prerequisites](#%EF%B8%8F-prerequisites)
3. [Deployment](#-deployment)
4. [Environment Configuration](#-environment-configuration)
5. [Testing](#-testing)
🔎 This repo was created with [Nx](https://nx.dev/).
### 📚 Description
This React chat app is built with Nx, Redux, Bootstrap and Firebase. It provides real-time chatting capabilities with options to edit your profile, start channels, view other profiles, and start DM conversations with people. This application is a great reference point for building a robust chat application.
---
### 🛠️ Prerequisites
#### Non Docker
- Please make sure to have [Node.js](https://nodejs.org/en/download/) (18+) locally by downloading the Javascript runtime via `brew`, `choco`, or `apt-get`.
- Please make sure to have Firebase configured by creating a new app on the [Firebase Console](https://console.firebase.google.com/). Registering with [AppCheck to use ReCaptcha](https://firebase.google.com/docs/app-check/web/recaptcha-provider) can help prevent abuse and safe guard your app against bad actors.
> Remark: Firebase CLI can streamline a lot of common configuration operations and can be downloaded via `npm i -g firebase-tools`.
#### Docker 🐳
- Please make sure to have [Docker Desktop](https://www.docker.com/products/docker-desktop/) operational to quickly compose the required dependencies. Then follow the docker procedure outlined below.
---
### 🚀 Deployment
#### Manual Deployment without Docker
- Clone the repo via `git clone https://github.com/msanvarov/chatr-messenger`.
- Download dependencies via `npm i` or `yarn`.
- Create a **.env file** via the `cp .env.example .env` command and replace the existing environment variable placeholders with valid responses.
- Start the api in development mode by using `npm run start` (the UI will be exposed on http://localhost:4200).
#### Deploying with Docker 🐳
- Execute the following command in-app directory:
```bash
# creates and loads the docker container in detached mode with the required configuration
$ docker-compose up -d
```
- The following command will download dependencies and execute the web application on http://localhost:4200 (deployed in development mode).
---
### 🔒 Environment Configuration
By default, the application comes with a config module that can read in every environment variable from the `.env` file.
**APP_ENV** - the application environment to execute as, either in development or production. Determines the type of logging options to utilize. Options: `development` or `production`.
**FIREBASE\_\*** - the firebase config details that can be fetched when creating the [SDK for the app](https://firebase.google.com/docs/web/setup).
**RECAPTCHA_KEY** - public recaptcha key for [Firebase AppCheck](https://firebase.google.com/docs/app-check/web/recaptcha-provider).
---
### ✅ Testing
#### Docker 🐳
```bash
# Start the docker container if it's not running
$ docker start chatr-messenger
# unit tests
$ docker exec -it chatr-messenger npm run test
```
#### Non-Docker
```bash
# execute test
$ npm run test
```
---
### 🏗️ Progress
| Branches | Status |
| ---------------------------------------------------------------: | :----- |
| [main](https://github.com/msanvarov/chatr-messenger) | ✅ |
| [feat/\*](https://github.com/msanvarov/chatr-messenger/branches) | 🚧 |
---
### 👥 Support
PRs are appreciated, I fully rely on the passion ❤️ of the OS developers.
---
## License
This starter API is [MIT licensed](LICENSE).
[Author](https://sal-anvarov.tech/)