https://github.com/ranitmanik/chat
A Real-Time Chat Application with React and Firebase.
https://github.com/ranitmanik/chat
chat chat-application firebase firebase-database firebase-realtime-database javascript react reactjs typescript
Last synced: about 2 months ago
JSON representation
A Real-Time Chat Application with React and Firebase.
- Host: GitHub
- URL: https://github.com/ranitmanik/chat
- Owner: RanitManik
- License: mit
- Created: 2024-06-25T09:10:37.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-19T20:21:37.000Z (about 1 year ago)
- Last Synced: 2025-08-14T00:02:33.886Z (about 2 months ago)
- Topics: chat, chat-application, firebase, firebase-database, firebase-realtime-database, javascript, react, reactjs, typescript
- Language: JavaScript
- Homepage: https://chat-v5.netlify.app
- Size: 257 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
CHAT – Connect, Have A Talk
View Demo
·
Report Bug
·
Request Feature
Welcome to **CHAT – *Connect, Have A Talk***, a real-time chat application built with React and Firebase. This application provides an interactive chat experience, leveraging modern technologies to deliver fast and reliable communication.
## Table of Contents
- [Overview](#overview)
- [Why This Application?](#why-this-application)
- [Technologies Used](#technologies-used)
- [Features](#features)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Running the Development Server](#running-the-development-server)
- [Building for Production](#building-for-production)
- [Linting and Formatting](#linting-and-formatting)
- [Project Structure](#project-structure)
- [Contributing](#contributing)
- [Contact](#contact)
- [Acknowledgments](#acknowledgments)
## Overview
### Why This Application?
CHAT is designed to offer a seamless real-time chat experience, making it easier to connect and communicate. Built with React and Firebase, it ensures real-time data synchronization and a smooth user interface, making it ideal for modern communication needs.
### Technologies Used
### Features
- **React**: A powerful JavaScript library for building user interfaces.
- **FirebaseContext**: A comprehensive app development platform for managing databases, authentication, and hosting.
- **Tailwind CSS**: A utility-first CSS framework for rapid UI development.
- **Shadcn/UI**: A UI component library for building beautiful interfaces.
- **JavaScript**: The programming language that powers the web.
- **PostCSS**: A tool for transforming CSS with JavaScript plugins.
- **ESLint**: Code linting to maintain consistent code quality.
- **Prettier**: Code formatting to ensure a consistent code style.
## Getting Started
### Prerequisites
- **Node.js** (>= 20.0.0)
- **npm** (>= 10.0.0) or **yarn** (>= 1.22.0)
### Installation
1. **Clone the repository:**
```bash
git clone https://github.com/RanitManik/CHAT.git
cd CHAT
```
2. **Install dependencies:**
```bash
npm install
```
or
```bash
yarn install
```
### Running the Development Server
To start the development server, run:
```bash
npm run dev
```
or
```bash
yarn dev
```
Open your browser and navigate to `http://localhost:5173` to see the application in action.
### Building for Production
To build the application for production, run:
```bash
npm run build
```
or
```bash
yarn build
```
The built files will be located in the `dist` directory.
### Linting and Formatting
To lint your code, run:
```bash
npm run lint
```
or
```bash
yarn lint
```
To format your code, run:
```bash
npm run format
```
or
```bash
yarn format
```
## Project Structure
The project structure is as follows:
```
CHAT/
├── public/ # Public static assets
├── src/ # Main source code
│ ├── assets/ # Application assets (e.g., images, icons)
│ ├── components/ # Reusable React components
│ │ ├── ui/ # UI components (e.g., buttons, forms)
│ │ └── block/ # Custom reusable components
│ ├── context/ # React contexts for state management
│ ├── hooks/ # Custom React hooks
│ ├── index.css # Global styles
│ ├── App.jsx # Main application component
│ └── main.jsx # Entry point for React application
├── .env.example # Template for environment variables
├── .gitignore # Files and directories to be ignored by Git
├── .prettierrc # Prettier configuration file
├── index.html # HTML template for the app
├── LICENSE # License information
├── package.json # Project dependencies and scripts
├── package-lock.json # Lock file for dependencies
├── postcss.config.js # PostCSS configuration
├── README.md # Project documentation
├── tailwind.config.js # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
├── tsconfig.node.json # TypeScript configuration for Node.js
└── vite.config.js # Vite configuration file
```
## Contributing
We welcome contributions to enhance the CHAT application. To contribute:
1. Fork the repository.
2. Create a new branch for your feature or bug fix:
```bash
git checkout -b feature-name
```
3. Make your changes and commit them with clear and descriptive messages.
4. Push your changes to your fork:
```bash
git push origin feature-name
```
5. Create a pull request to the main repository, detailing the changes and enhancements you have made.
## Contact
Social Media
Username
Link
Email
ranitmanik.dev@gmail.com
Email
LinkedIn
Ranit Manik
LinkedIn
Instagram
ranit_manik_
Instagram
Facebook
RanitKumarManik
Facebook
_Feel free to reach out if you have questions or just want to chat about web adventures!_
## Acknowledgments
This project wouldn't be possible without the collaboration and resources of the developer community. Thanks to the community and tools like React and Firebase. Special appreciation goes to friends and family. I hope it inspires further learning.
---
Thank you for using CHAT! Happy chatting! 🚀