https://github.com/charanteja-7/basicchatapplication
This project is a simple web-based chat application that connects to Firebase for real-time messaging. It allows users to send and receive messages in real-time using HTML, CSS, and JavaScript.
https://github.com/charanteja-7/basicchatapplication
css3 firebase html5 javascript
Last synced: 3 months ago
JSON representation
This project is a simple web-based chat application that connects to Firebase for real-time messaging. It allows users to send and receive messages in real-time using HTML, CSS, and JavaScript.
- Host: GitHub
- URL: https://github.com/charanteja-7/basicchatapplication
- Owner: charanteja-7
- Created: 2024-03-23T14:46:00.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-07T01:24:46.000Z (9 months ago)
- Last Synced: 2025-01-19T20:17:40.624Z (5 months ago)
- Topics: css3, firebase, html5, javascript
- Language: JavaScript
- Homepage:
- Size: 701 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Basic Chat Application
## Overview
This project is a simple web-based chat application that connects to Firebase for real-time messaging. It allows users to send and receive messages in real-time using HTML, CSS, and JavaScript.
## Features
- **Real-time Messaging:** Send and receive messages instantly.
- **User Interface:** Simple and clean chat interface built with HTML and CSS.
## Technologies Used
- **HTML:** For structuring the chat application.
- **CSS:** For styling the chat application.
- **JavaScript:** For handling the chat logic and interactions.
- **Firebase:** For real-time database..
## Getting Started
### Prerequisites
- Basic understanding of HTML, CSS, and JavaScript.
- A Firebase account for configuring authentication and database.
### Installation
1. **Clone the Repository:**
```bash
git clone https://github.com/charanteja-7/BasicChatApplication.git.
```
2. **Set Up Firebase:**
- Go to the [Firebase Console](https://console.firebase.google.com/) and create a new project.
- Add a web app to your Firebase project and obtain your Firebase configuration credentials.
3. **Configure Firebase:**
Create a `index.js` file in the src directory and add your Firebase configuration:
```javascript
// firebase-config.js
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",
measurementId: "your-measurement-id"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
```
### Usage
1. **Open the Application:**
Open the `index.html` file in a web browser.
2. **Start Chatting:**
- Users can enter their messages and see them appear in real-time.
- Messages are stored and synchronized via Firebase.