Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shaw145/real-time-chat-application
A Full stack chat app using React JS and Firebase. In this chat app you can create an account and chat with your friends. In the chat you can also send the images.
https://github.com/shaw145/real-time-chat-application
chat-application firbase firebase-auth firebase-realtime-database react react-router reactjs real-time real-time-chat real-time-chat-application realtimechat
Last synced: 10 days ago
JSON representation
A Full stack chat app using React JS and Firebase. In this chat app you can create an account and chat with your friends. In the chat you can also send the images.
- Host: GitHub
- URL: https://github.com/shaw145/real-time-chat-application
- Owner: Shaw145
- Created: 2024-08-29T13:37:57.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2024-08-29T17:09:42.000Z (3 months ago)
- Last Synced: 2024-10-11T05:41:05.676Z (about 1 month ago)
- Topics: chat-application, firbase, firebase-auth, firebase-realtime-database, react, react-router, reactjs, real-time, real-time-chat, real-time-chat-application, realtimechat
- Language: JavaScript
- Homepage:
- Size: 2.92 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# A Real-time Chat Application
## Overview
A full-stack chat application built with React JS and Firebase. It allows users to create an account, chat with friends in real-time, and share images directly within the chat. The app leverages Firebase for user authentication, real-time message synchronization, and secure image storage, providing a seamless and responsive chatting experience.
## Features
- **User Authentication**: Secure user account creation and login using Firebase Authentication.
- **Real-time Messaging**: Messages are stored in Firebase Firestore and are updated in real-time across all connected users.
- **Image Sharing**: Users can share images within the chat, with the images stored securely in Firebase Storage.
- **Responsive UI**: Built with React JS, the app offers a smooth and intuitive user experience across devices.
## Tech Stack
- **Frontend**: React JS
- **Backend**: Firebase (Authentication, Firestore Database, Storage)
- **Hosting**: Firebase Hosting
## Installation
1. Clone the repository:
```bash
git clone https://github.com/Shaw145/Real-time-Chat-Application.git
cd Real-time-Chat-Application
2. Install dependencies:
```bash
npm install
```
3. Create a Firebase project and configure Firebase in your React app:
- Go to the Firebase Console.
- Create a new project.
- Add a new web app and copy the Firebase config object.
- Replace the Firebase configuration in your project with the new config details.
4. Run the app:
```bash
npm run dev
```
## Usage
- Sign up or log in using your email and password.
- Start a new chat with your friends by searching for their usernames.
- Send text messages and share images in real-time.
## Author
- Suman Shaw
## Resources
- [**GreatStack**](https://www.youtube.com/@GreatStackDev)