Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aviralsharma07/react-chat-app
https://github.com/aviralsharma07/react-chat-app
Last synced: 29 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/aviralsharma07/react-chat-app
- Owner: aviralsharma07
- Created: 2024-04-17T09:46:50.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-05-04T12:35:49.000Z (9 months ago)
- Last Synced: 2024-05-04T13:38:25.058Z (9 months ago)
- Language: JavaScript
- Homepage: https://chatnest-app-avi.netlify.app/
- Size: 264 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Chat App
Live Project Link: [React Chat App](https://chatnest-app-avi.netlify.app/)
This is a React-based chat application that utilizes Firebase for storage and authentication. It uses Zustand as a state management tool and provides features for real-time messaging.
## Features
1. Real-time chat functionality with instant messaging capabilities.
2. Secure user authentication and data storage using Firebase.
3. Efficient state management with Zustand.
4. Custom UI components for a unique chat experience.
5. User management features including adding connections and blocking unwanted interactions.
6. Real-time data updates and synchronization with Firebase Firestore.
7. Responsive design for seamless user experience across devices.
## Folder Structure
```
react-chat-app/
├── .firebase/ # Firebase configuration files
├── build/ # Production build output
├── public/ # Public assets and HTML template
│ ├── index.html # Main HTML template
├── src/ # Source files
│ ├── components/ # React components
│ │ ├── Chat/ # Chat components
│ │ ├── Detail/ # Detail components
│ │ ├── List/ # List components
│ │ ├── Login/ # Login components
│ │ └── Notification/ # Notification components
│ ├── context/ # Context for state management
│ ├── lib/ # Additional library files
│ │ ├── chatstore.js # Zustand store for chat state
│ │ ├── firebase.js # Firebase configuration
│ │ ├── upload.js # Utility functions for file uploads
│ │ └── userStore.js # Zustand store for user authentication
├── .env # Environment variables configuration
├── .eslintrc.cjs # ESLint configuration
├── .firebaserc # Firebase configuration
├── .gitignore # Git ignore file
├── README.md # Project documentation
├── firebase.json # Firebase hosting configuration
├── index.html # HTML template
├── package-lock.json # Dependency lock file
├── package.json # npm package metadata
├── vite.config.js # Vite configuration
```
## Technologies Used
- **React**: JavaScript library for building user interfaces.
- **Firebase**: Cloud-based platform for building mobile and web applications.
- **Zustand**: State management library for React.
- **Vite**: Frontend build tool that provides fast development server and optimized builds.
- **ESLint**: Tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
## Setup Instructions
1. Clone the repository:
```bash
git clone https://github.com/aviralsharma07/react-chat-app
```
2. Navigate to the project directory:
```bash
cd react-chat-app
```
3. Install dependencies:
```bash
npm install
```
4. Set up Firebase:
- Create a Firebase project on the [Firebase Console](https://console.firebase.google.com/).
- Copy the Firebase configuration object into `src/lib/firebase.js`.
- Enable Firebase Authentication and Firebase Realtime Database or Firestore for the chat functionality.
5. Start the development server:
```bash
npm run dev
```
6. Open the browser and navigate to the provided URL to view the app.
## Usage
Once the app is running, users can sign in, view their chat history, and send messages in real-time.