https://github.com/kustiks/simple-chat
Simple chat is an application that helps you to communicate with other people in real time
https://github.com/kustiks/simple-chat
chat chat-app-using-firebase chat-application firebase firebase-auth firestore react redux-toolkit storybook styled-components typescript vite
Last synced: 3 months ago
JSON representation
Simple chat is an application that helps you to communicate with other people in real time
- Host: GitHub
- URL: https://github.com/kustiks/simple-chat
- Owner: KUSTIKs
- Created: 2022-08-17T16:51:21.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-06-09T20:19:41.000Z (about 3 years ago)
- Last Synced: 2025-05-30T04:58:36.367Z (about 1 year ago)
- Topics: chat, chat-app-using-firebase, chat-application, firebase, firebase-auth, firestore, react, redux-toolkit, storybook, styled-components, typescript, vite
- Language: TypeScript
- Homepage: https://simple-chat-71ab0.web.app/
- Size: 865 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Simple Chat
Application that helps you to communicate with other in real time
Live Demo
·
Video Demo
·
Report Bug
·
Request Feature
## About this project
Simple chat is an application that helps you to communicate with other in real time
### Built With
- [React](https://reactjs.org/)
- [Typescript](https://www.typescriptlang.org/)
- [Firebase](https://firebase.google.com/)
- [Vite](https://vitejs.dev/)
- [Redux Toolkit](https://redux-toolkit.js.org/)
- [Styled Components](https://styled-components.com/)
### Additional Tools
- [Storybook](https://storybook.js.org/)
- [Figma](https://www.figma.com/)
## Getting Started
### Prerequisites
In this project yarn is used, so make sure, you have it installed
```sh
npm install yarn@latest -g
```
### Installation
1. Clone the repo
```sh
git clone https://github.com/KUSTIKs/simple-chat.git
```
or
```sh
git clone git@github.com:KUSTIKs/simple-chat.git
```
1. Install dependencies
```sh
yarn
```
1. To start a project run
```sh
yarn dev
```
## Mobile adaptive
This application is fully mobile responsive
 |  | 
---|---|---
## Bot
Bot is just a user, which responds with joke from [chucknorris.io](https://api.chucknorris.io/) api on every user message
## Data
This project is using Firebase auth for authentication and Firestore to manage data. Interfaces of entities look look like so
```typescript
type Account = {
id: string;
name: string;
avatarUrl: string;
isOnline: boolean;
lastTimeOnlineAt: Timestamp;
email: string;
};
type Chat = {
id: string;
members: [Account, Account];
messages: Message[];
};
type Message = {
id: string;
author: Account;
content: string;
createdAt: Timestamp;
};
```
By the help of firebase `onSnapshot` function, real time updating is working. For example, when you send message, it immediately appears on both accounts
## Storybook
To start storybook locally, use following command
```sh
yarn storybook
```
there are two groups of components here: components, and widgets, that can use other components and have some side effects