https://github.com/farazf19/react-chatapp

https://github.com/farazf19/react-chatapp

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/farazf19/react-chatapp
• Owner: FarazF19
• Created: 2024-06-09T13:24:14.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-07-31T06:20:45.000Z (5 months ago)
• Last Synced: 2024-07-31T07:45:23.060Z (5 months ago)
• Language: JavaScript
• Homepage: https://react-chat-app-one-weld.vercel.app
• Size: 275 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
```

## React Chat Application

This is a chat application built using React and Firebase. It allows users to authenticate, view a list of chats, send messages, and receive notifications. The app is structured with components for different functionalities, such as chat, login, notifications, and user details.

## Table of Contents

Installation

Usage

Features

Project Structure

Contributing

License

Installation

Clone the repository:

bash

Copy code

git clone https://github.com/yourusername/chat-app.git

Navigate to the project directory:

bash

Copy code

cd chat-app

Install the dependencies:

bash

Copy code

npm install

Set up Firebase:

## Create a Firebase project at Firebase Console.

Add a web app to your Firebase project and copy the Firebase configuration.

Replace the placeholder configuration in src/lib/firebase.js with your Firebase configuration.

javascript

Copy code

// src/lib/firebase.js

import { initializeApp } from "firebase/app";

import { getAuth } from "firebase/auth";

import { getFirestore } from "firebase/firestore";

const firebaseConfig = {

  apiKey: "YOUR_API_KEY",

  authDomain: "YOUR_AUTH_DOMAIN",

  projectId: "YOUR_PROJECT_ID",

  storageBucket: "YOUR_STORAGE_BUCKET",

  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",

  appId: "YOUR_APP_ID",

};

const app = initializeApp(firebaseConfig);

const auth = getAuth(app);

const db = getFirestore(app);

export { auth, db };

Start the development server:

bash

Copy code

npm start

The app should now be running on http://localhost:3000.

## Usage

Open the application in your browser.

Sign up or log in using your Firebase credentials.

Once authenticated, you can view the list of chats.

Select a chat to start sending messages.

Notifications are displayed for new messages.

Features

Authentication: User authentication using Firebase Authentication.

Chat: Real-time messaging using Firebase Firestore.

User Details: View user details.

Notifications: In-app notifications for new messages.

Project Structure

css

Copy code

src/

├── components/

│   ├── chat/

│   │   └── Chat.jsx

│   ├── detail/

│   │   └── Detail.jsx

│   ├── list/

│   │   └── List.jsx

│   ├── login/

│   │   └── Login.jsx

│   ├── notification/

│   │   └── Notification.jsx

├── lib/

│   ├── firebase.js

│   ├── userStore.js

│   └── chatStore.js

├── App.jsx

├── index.js

├── chatList.css

└── chat.css

components/chat/Chat.jsx: The chat interface component.

components/detail/Detail.jsx: Component to display user details.

components/list/List.jsx: Component to display the list of chats.

components/login/Login.jsx: Component for user login.

components/notification/Notification.jsx: Component for notifications.

lib/firebase.js: Firebase configuration and initialization.

lib/userStore.js: State management for user-related data.

lib/chatStore.js: State management for chat-related data.

App.jsx: Main app component.

index.js: Entry point of the application.

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## License

This project is licensed under the MIT License.