Skip to content

Chat App using React.js, Tailwind and for database and deployment using Firebase

Notifications You must be signed in to change notification settings

utsavpatel562/React-Chat-App

Repository files navigation

📱 React-Chat-App

Welcome to the React-Chat-App! This is a real-time chat application built with React, Firebase, and Firestore. The app leverages Zustand for state management and Tailwind CSS for styling. It's deployed using Firebase Hosting.

🚀 Features

  • Authentication: Login and SignUp using Firebase
  • Real-Time Data Storage: Chat in real-time with Firestore
  • Block and Unblock Users: Control your chat experience
  • Single Chat View: Focus on one conversation at a time
  • Search Filter: Easily find your chats

🛠️ Tech Stack

  • React: JavaScript library for building user interfaces
  • Firebase: Backend-as-a-Service for authentication and real-time database
  • Firestore: NoSQL document database built for automatic scaling
  • Zustand: Small, fast, and scalable state management solution
  • Tailwind CSS: Utility-first CSS framework for rapid UI development
  • Firebase Hosting: Fast and secure web hosting for static and dynamic content

🏃‍♂️ Getting Started

Follow these steps to get a local copy of the project up and running.

Prerequisites

  • Node.js
  • npm or yarn

Installation

  1. Clone the repo

    git clone https://github.com/utsavpatel562/React-Chat-App.git
    cd React-Chat-App
    npm install
    

Configure Firebase

Create a .env file in the root directory and add your Firebase configuration:

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

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
git checkout -b feature/AmazingFeature
git commit -m 'Add some AmazingFeature'
git push origin feature/AmazingFeature

📧 Contact

Utsav Patel - [email protected]
Project Link: https://github.com/utsavpatel562/React-Chat-App

📝 License

Distributed under the MIT License.
See LICENSE for more information.