Skip to content

Latest commit

 

History

History
97 lines (49 loc) · 2.67 KB

README.md

File metadata and controls

97 lines (49 loc) · 2.67 KB
Raw

Chit-Chat-Hub - Ultimate Chatting Application

Screenshot 2023-12-03 015309

Welcome to Chit-Chat-Hub, a feature-rich chatting application that provides a seamless communication experience for users. Whether you want to connect with friends in group chats, have private conversations in dedicated chat rooms, or quickly join specific chats using unique Chat IDs, Chit-Chat-Hub has you covered.

🚀 Live Demo

Experience the project live: Chit-Chat-Hub

🌟 Features

  • Group Chat: Create and participate in group conversations with friends.

  • Private Chat Rooms: Engage in one-on-one or private discussions.

  • Join with Chat ID: Quickly join specific chats using unique Chat IDs for easy access.

  • Real-time Messaging: Send and receive messages instantly with real-time updates.

  • User Authentication: Secure access with user authentication to manage chat access.

  • Responsive Design: Optimized for mobile and desktop for a smooth user experience.

🛠️ Tech Stack

  • Frontend: React, TypeScript, Tailwind CSS, HTML5, CSS3
  • Backend: Firebase
  • Hosting: Vercel

📸 Screenshots

Untitled design Screenshot 2024-12-20 004007 Untitled design (1)

Getting Started

To get started with Chit-Chat-Hub, follow these simple steps:

  1. Clone the repository:

    https://github.com/anwesha2002/Chit-Chat-Hub.git
cd Chit-Chat-Hub

  2. Install dependencies

    npm install

  3. Set up environment variables:

     REACT_APP_FIREBASE_API_KEY=FIREBASE_API_KEY

  4. Start the development server:

    npm run dev

Usage

  • User Authentication: Users can register/# to access the app securely.

  • Chat Rooms: Users can create, join, and leave chat rooms as needed.

  • Messaging: Real-time messaging ensures seamless communication between users.

  • Chat IDs: Each chat room has a unique ID that users can use to quickly join specific rooms.

📂 Project Structure

src/
├── components/        # Reusable React components
├── style/             # Tailwind css
├── pages/             # Application pages
├── Util/              # Utility functions
├── model/             # Data models
└── context/           # Reusabe state context