https://github.com/shikhu51197/chatinterface
This project is a simple chat application built using React and Firebase as the backend. It includes Google Authentication for user sign-in and Firebase Realtime Database for storing and retrieving chat messages in real time.
https://github.com/shikhu51197/chatinterface
daisyui firebase react-router-dom reactjs tailwindcss vitejs
Last synced: 3 months ago
JSON representation
This project is a simple chat application built using React and Firebase as the backend. It includes Google Authentication for user sign-in and Firebase Realtime Database for storing and retrieving chat messages in real time.
- Host: GitHub
- URL: https://github.com/shikhu51197/chatinterface
- Owner: shikhu51197
- Created: 2024-02-09T16:27:16.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-11T16:28:04.000Z (over 2 years ago)
- Last Synced: 2025-01-31T15:41:52.183Z (over 1 year ago)
- Topics: daisyui, firebase, react-router-dom, reactjs, tailwindcss, vitejs
- Language: JavaScript
- Homepage: https://chat-interface-jfoq.vercel.app/
- Size: 74.2 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
> 💻 PROJECT NAME ✨ => 💻 : React Firebase Chat App 🧑🏫
---
## 🔗 Profile Links✨
| Resume | Github | Linkedin | Portfolio | Blogger | Medium |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| [](https://drive.google.com/file/d/1YE62u2ChjmlR-EKeqZ75UvFMg_KcY86T/view?usp=sharing) | [](https://github.com/shikhu51197/)| [](https://www.linkedin.com/in/shikha-gupta-12a2b5199) |[](https://shikhu51197.github.io/) |[](https://wwwartificial-intelligence.blogspot.com/) |[](https://medium.com/@sg780060) |
---
## Overview🔥❤️🔥
This project is a simple chat application built using React and Firebase as the backend. It includes Google Authentication for user sign-in and Firebase Realtime Database for storing and retrieving chat messages in real time. The application provides a basic chat interface with dynamic updates.
# 🔥❤️🔥Check Live -
https://chat-interface-jfoq.vercel.app/
## 🔥❤️🔥 Features
- Google Authentication: Users can sign in using their Google accounts.
- Realtime Chat: Messages are sent and received in real-time using Firebase Realtime Database.
- Responsive Design: The application is designed to work seamlessly on various devices.
- Simple and intuitive user interface.
- Dynamic chat updates based on user interactions.
## 🔥❤️🔥 Tech Stack
- Frontend: vite , React , tailwindcss , daisyUi
- Backend: firebase
## Installation 🔥
1. Clone the repository:
git clone https://github.com/your-username/react-firebase-chat.git
Navigate to the project directory:
cd react-firebase-chat
Install dependencies:
npm install
$ Usage
Run the application:
npm start
Open your browser and go to http://localhost:3000.
Start sending and receiving messages in the chat.
# Create a Firebase project and configure it: 🔥
Go to the Firebase Console.
Click on "Add Project" and follow the instructions to create a new project.
Once the project is created, click on "Authentication" in the left sidebar and enable the "Google" sign-in method.
Click on "Database" and set up a Realtime Database.
# Firebase Configuration ❤️🔥
Make sure to replace the Firebase configuration in src/App.js with your own Firebase project credentials:
const firebaseConfig = {
REACT_APP_FIREBASE_API_KEY=your-api-key
REACT_APP_FIREBASE_AUTH_DOMAIN=your-auth-domain
REACT_APP_FIREBASE_PROJECT_ID=your-project-id
REACT_APP_FIREBASE_STORAGE_BUCKET=your-storage-bucket
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id
REACT_APP_FIREBASE_APP_ID=your-app-id
};
Ensure that your Firebase project has Firestore enabled for real-time database functionality.
## Endpoints Reference 🔥❤️🔥
For detailed information on how to use our App :-
## Welcome Users Route ❤️🔥
| Route | Endpoint | Description | Features |
| --------------- | -------- | -------------------------------------- | ----------------- |
| Welcome Message | / | Provides a welcome message and Google Authenticate. | - Welcome message & user Google login |
## Users Chat ❤️🔥
| Route | Endpoint | Description | Features |
| --------------- | ------------------------------ | ----------------------------------------------------------- | -------------------------------------- |
| chat page | /chat | chat with multiple users. | - Chat with login user |
---
# Package.json(Dependency)✨:-
| Serial No | Frontend |
| ----------- |-------------- |
| 1 | tailwindcss , daisyui|
| 2 | react-router-dom, vite |
| 3 | firebase , react|
---
# Contributing 🔥
Contributions are welcome! If you find a bug or want to add new features, please open an issue or submit a pull request.
✨Thank You✨