https://github.com/elvan/chat-room-app-vue-firebase
This project is a real-time chat application built with Vue.js and Firebase. It demonstrates the use of modern web development technologies to create a dynamic and interactive user experience.
https://github.com/elvan/chat-room-app-vue-firebase
Last synced: 3 months ago
JSON representation
This project is a real-time chat application built with Vue.js and Firebase. It demonstrates the use of modern web development technologies to create a dynamic and interactive user experience.
- Host: GitHub
- URL: https://github.com/elvan/chat-room-app-vue-firebase
- Owner: elvan
- Created: 2024-02-14T01:01:34.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-14T05:16:41.000Z (over 2 years ago)
- Last Synced: 2025-01-21T02:44:13.490Z (over 1 year ago)
- Language: Vue
- Homepage:
- Size: 91.8 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Chat Room App with Vue and Firebase
---
---
## Description
This project is a real-time chat application built with Vue.js and Firebase. It demonstrates the use of modern web development technologies to create a dynamic and interactive user experience. The app allows users to sign up, log in, and participate in chat rooms, showcasing real-time messaging capabilities powered by Firebase Firestore and Firebase Authentication.
## Features
- **Real-Time Chat**: Utilizing Firebase Firestore, the application offers real-time chat functionality, allowing messages to be sent and received instantly.
- **User Authentication**: Firebase Authentication is used to manage user sign-up, login, and logout processes, ensuring secure access to the chat room.
- **Responsive Design**: The app features a clean, user-friendly interface that adapts to various screen sizes, ensuring a seamless experience across devices.
- **Auto-scrolling Messages**: As new messages arrive, the chat window automatically scrolls to the bottom, keeping the latest messages in view.
- **Timestamps Formatting**: Messages are timestamped and displayed using `date-fns` to provide a friendly, relative format (e.g., "5 minutes ago").
## Installation
### Prerequisites:
- Node.js and npm (Node Package Manager)
- Vue CLI installed globally (`npm install -g @vue/cli`)
- Firebase account for setting up Firestore and Authentication
### Environment Setup:
1. Clone the repository to your local machine.
2. Navigate to the project directory and install dependencies with `npm install`.
3. Create a Firebase project and configure Authentication and Firestore.
4. Add your Firebase project configuration to `src/firebase/config.js` (refer to `src/firebase/config.js.example` for the template).
### Installation Commands:
```bash
git clone
cd
npm install
```
## Usage
After completing the installation steps, you can start the development server with:
```bash
npm run serve
```
Navigate to `http://localhost:8080/` to access the application. You can sign up for an account or log in if you already have one, and then start chatting in real-time.
For deploying the application, you can build the project using `npm run build` and deploy the `dist` folder contents to your preferred hosting service.