Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/utsavpatel562/react-chat-app
Chat App using React.js, Tailwind and for database and deployment using Firebase
https://github.com/utsavpatel562/react-chat-app
chat-app-using-firebase chat-app-using-react deployment fireabse reactjs tailwindcss
Last synced: about 1 month ago
JSON representation
Chat App using React.js, Tailwind and for database and deployment using Firebase
- Host: GitHub
- URL: https://github.com/utsavpatel562/react-chat-app
- Owner: utsavpatel562
- Created: 2024-05-25T01:49:41.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-07-17T16:24:34.000Z (6 months ago)
- Last Synced: 2024-07-17T20:16:27.802Z (6 months ago)
- Topics: chat-app-using-firebase, chat-app-using-react, deployment, fireabse, reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://react-chatapp-d5410.firebaseapp.com
- Size: 16.7 MB
- Stars: 7
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# 📱 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**
```sh
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.