Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/s-shemmee/chatnow
ChatNow is a real-time web chat application powered by Firebase, React, and TypeScript. It provides users with a seamless platform for engaging in instant conversations, sharing messages, and more.
https://github.com/s-shemmee/chatnow
chatapp firebase firebase-auth firebase-cloud-messaging firebase-database firebase-firestore material-ui open-source project-based-learning reactjs typescript vercel vercel-cli webchatapp
Last synced: 2 days ago
JSON representation
ChatNow is a real-time web chat application powered by Firebase, React, and TypeScript. It provides users with a seamless platform for engaging in instant conversations, sharing messages, and more.
- Host: GitHub
- URL: https://github.com/s-shemmee/chatnow
- Owner: s-shemmee
- License: mit
- Created: 2023-12-25T13:46:02.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-29T19:16:39.000Z (6 months ago)
- Last Synced: 2024-07-30T01:30:07.789Z (6 months ago)
- Topics: chatapp, firebase, firebase-auth, firebase-cloud-messaging, firebase-database, firebase-firestore, material-ui, open-source, project-based-learning, reactjs, typescript, vercel, vercel-cli, webchatapp
- Language: TypeScript
- Homepage: https://chat-now-shemmee.vercel.app
- Size: 788 KB
- Stars: 10
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ChatNow - Real-time Web Chat Application 🚀
## Overview
ChatNow is a real-time web chat application built using Firebase for backend services and React for the frontend. This project was created as a learning and practice exercise to explore Firebase integration, TypeScript, and other web development technologies.
## Preview
## 💻 Technologies Used
### Frontend
- **React:** JavaScript library for building user interfaces.
- **TypeScript:** Typed superset of JavaScript for improved code quality.
- **Material-UI:** React components for a responsive design.
### Backend
- **Firebase Authentication:** User authentication and authorization.
- **Firebase Firestore:** Cloud-based NoSQL database for storing messages and user data.
- **Firebase Storage:** Scalable object storage for multimedia content.
- **Firebase Cloud Functions:** Serverless functions for additional backend logic.
## 🌟 Features
- **Real-time Chat:** Engage in instant conversations.
- **Firebase Authentication:** User management with authentication.
- **User Status Tracking:** Monitor online/offline status.
- **Message History:** Store messages in Cloud Firestore.
- **Media Support:** Share images and text messages.
- **Emoji Support:** Express yourself with a rich set of emojis.
- **Timestamps:** Provide context with message timestamps.
- **TypeScript Integration:** Enhance code readability.
- **Modern UI Design:** Ensure a seamless user experience.
### 🔮 Upcoming Features
Here's a sneak peek into what's coming next:
- **Group Chats:** Simultaneously converse with multiple users.
- **Read/Unread Messages:** Easily keep track of your messages.
- **Archive Chats:** Organize conversations for future reference.
- **Advanced Message Management:** Control messages with delete, forward, and copy options.
- **Customizable Themes:** Personalize your chat environment.
- **Enhanced User Profiles:** Add more details for a personalized experience.
- **Improved Notifications:** Receive enhanced notifications for new messages and updates.
## 🏁 Getting Started
### 📥 Installation
To start using ChatNow, follow these steps:
1. **Clone the repository.**
```bash
git clone https://github.com/s-shemmee/ChatNow.git
```
2. **Install dependencies.**
```bash
cd ChatNow
npm install
```
3. **Set up Firebase.**
- Create a new project on [Firebase](https://firebase.google.com/).
- Obtain your Firebase configuration and update `firebase.tsx`.
- Set up Firestore and Storage in your Firebase project.
4. **Run the application.**
```bash
npm run dev
```
5. **Open the app in your browser:**
[http://localhost:3000](http://localhost:3000).
## ⚙️ Usage
1. **Create Account:**
- Sign up or log in if you already have an account.
2. **Start a Chat:**
- Initiate a new chat by searching for a user.
3. **Enjoy Real-time Chat:**
- Send messages and images in real-time.
## 🤝 Contributing
Contributions are welcome! If you encounter issues or have suggestions, open an issue or submit a pull request.
## 📝 License
This project is licensed under the [MIT License](LICENSE).