React-Firebase Chat App

A real-time, cloud-based chat application built with React and Firebase. This project features user authentication and live messaging, making it a practical tool for learning real-time app development with Firebase. Currently, the project is a work-in-progress, with core functionalities in place and several advanced features planned.

🛠️ Features (In Progress)

• User Authentication: Allows secure login and registration with Firebase Authentication.
• Real-time Messaging: Instant message updates between users using Firebase Firestore.
• Responsive Design: Optimized layout for mobile, tablet, and desktop devices.

🚧 Upcoming Enhancements

• User Presence Status: Show online/offline status for active users.
• Message Notifications: Real-time notifications for new messages.
• Typing Indicator: Notify other users when someone is typing.
• Chat Rooms: Create and join multiple chat rooms.
• Message Reactions: Allow users to react to messages with emojis.

🖥️ Live Preview

Visit the live preview of this project here. (Replace with link once the project is deployed.)

📌 Installation

1. Clone the repository:

   git clone https://github.com/your-username/react-firebase-chatapp.git

2. Navigate to the project directory:

   cd react-firebase-chatapp

3. Install dependencies:

   npm install

4. Set up Firebase:
   • Create a new Firebase project on the Firebase Console.
   • Add a new web app to the Firebase project and copy the configuration details.
   • Create a .env file in the project’s root directory and add your Firebase credentials:

     REACT_APP_API_KEY=your_api_key
     REACT_APP_AUTH_DOMAIN=your_auth_domain
     REACT_APP_PROJECT_ID=your_project_id
     REACT_APP_STORAGE_BUCKET=your_storage_bucket
     REACT_APP_MESSAGING_SENDER_ID=your_messaging_sender_id
     REACT_APP_APP_ID=your_app_id

5. Start the app:

   npm start

🎯 Project Goals

This project is intended as a learning exercise for mastering React with Firebase, especially focusing on real-time data handling, user authentication, and responsive UI design.

📝 Project Status

This project is actively being developed. Core features are partially implemented, with ongoing work to add new functionalities and enhance the user experience.