ChatterBox - Real Time Chat Application

A fully functional real-time chat application built with React 18, Firebase, and modern web technologies.

Features

• 🔐 User Authentication (Email/Password)
• 💬 Real-time Messaging
• 🏠 Multiple Chat Rooms
• ✍️ Typing Indicators
• 📱 Responsive Design
• 🎨 Modern UI with CSS Modules

Tech Stack

• React 18 (Vite)
• Firebase 9 (Authentication, Firestore)
• React Router DOM v6
• CSS Modules
• date-fns
• clsx

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• Firebase account

Installation

1. Clone the repository:

bash
git clone https://github.com/Latikeshh/frontend.git
cd frontend

2. Install dependencies:

bash
npm install

3. Set up Firebase:

   • Create a Firebase project at firebase.google.com
   • Enable Authentication (Email/Password provider)
   • Enable Cloud Firestore
   • Go to Project Settings and copy your Firebase config

4. Configure environment variables:

   Copy the contents of .env and replace the placeholder values with your Firebase config:

   REACT_APP_FIREBASE_API_KEY=your_api_key
   REACT_APP_FIREBASE_AUTH_DOMAIN=your_auth_domain
   REACT_APP_FIREBASE_PROJECT_ID=your_project_id
   REACT_APP_FIREBASE_STORAGE_BUCKET=your_storage_bucket
   REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
   REACT_APP_FIREBASE_APP_ID=your_app_id
   

5. Start the development server:

bash
npm run dev

6. Open http://localhost:3000 in your browser

Firestore Security Rules

For development, you can use these rules. For production, please customize them according to your needs:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /rooms/{roomId} {
      allow read, write: if request.auth != null;
    }
    match /messages/{messageId} {
      allow read, write: if request.auth != null;
    }
    match /typing/{roomId} {
      allow read, write: if request.auth != null;
    }
    match /users/{userId} {
      allow read, write: if request.auth != null;
    }
  }
}

Deployment

Deploy to Vercel

1. Install Vercel CLI:

bash
npm i -g vercel

2. Deploy:

bash
vercel

3. Follow the prompts and add your environment variables in the Vercel dashboard.

License

MIT