Skip to content

This is a Real Time Chat app which uses Firebase. Please Checkout the below link :

Notifications You must be signed in to change notification settings

RohanKrMahato/SuperChat-app

Repository files navigation

# Real-Time Chat Application

This is a real-time chat application built using Firebase, Vite, Zustand, and Toastify. The project also utilizes ESLint for linting and npm for package management.

## Features

- Real-time messaging with Firebase
- State management with Zustand
- Notifications with Toastify
- Linting with ESLint
- Fast development with Vite
- Emoji support with `npm emoji`

## Getting Started

### Installation

1. Clone the repository:

    ```
    git clone https://github.com/yourusername/your-repo-name.git
    cd your-repo-name
    ```

2. Install the dependencies:

    ```npm install
    ```

### Running the Application

To start the development server, run:

```npm run dev

In the termial you will get the Local Host link

Project Structure

There is some issue showing DataBase_Design here. Please checkout repository root folder

Available Scripts

In the project directory, you can run:

  • npm run dev: Starts the development server.
  • npm run build: Builds the app for production.
  • npm run lint: Runs ESLint to check for linting errors.

Configuration

Firebase

Ensure you have a Firebase project set up.

// src/lib/firebase.js

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export { db };

Zustand

State management is handled by Zustand. A sample store might look like this:

// src/lib/chatStore.js

import create from 'zustand';

const useChatStore = create(set => ({
  messages: [],
  addMessage: (message) => set(state => ({ messages: [...state.messages, message] })),
}));

export default useChatStore;

Toastify

For notifications, Toastify can be used as follows:

// Example usage in a component
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

toast.success("Message sent!");

Contributors

Happy coding! 🎉

About

This is a Real Time Chat app which uses Firebase. Please Checkout the below link :

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published