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
• Typescript
• Firebase
• Vite
• Redux Toolkit
• Styled Components

Additional Tools

• Storybook
• Figma

(back to top)

Getting Started

Prerequisites

In this project yarn is used, so make sure, you have it installed

npm install yarn@latest -g

Installation

1. Clone the repo

   git clone https://github.com/KUSTIKs/simple-chat.git

   or

   git clone git@github.com:KUSTIKs/simple-chat.git

2. Install dependencies

   yarn

3. To start a project run

   yarn dev

(back to top)

Mobile adaptive

This application is fully mobile responsive

(back to top)

Bot

Bot is just a user, which responds with joke from chucknorris.io api on every user message

(back to top)

Data

This project is using Firebase auth for authentication and Firestore to manage data. Interfaces of entities look look like so

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

(back to top)

Storybook

To start storybook locally, use following command

  yarn storybook

there are two groups of components here: components, and widgets, that can use other components and have some side effects

(back to top)