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.
Install / Use
/learn @s-shemmee/ChatNowREADME
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:
-
Clone the repository.
git clone https://github.com/s-shemmee/ChatNow.git -
Install dependencies.
cd ChatNow npm install -
Set up Firebase.
- Create a new project on Firebase.
- Obtain your Firebase configuration and update
firebase.tsx. - Set up Firestore and Storage in your Firebase project.
-
Run the application.
npm run dev -
Open the app in your browser: http://localhost:3000.
⚙️ Usage
-
Create Account:
- Sign up or log in if you already have an account.
-
Start a Chat:
- Initiate a new chat by searching for a user.
-
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.
Related Skills
Writing Hookify Rules
110.7kThis skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.
review-duplication
100.6kUse this skill during code reviews to proactively investigate the codebase for duplicated functionality, reinvented wheels, or failure to reuse existing project best practices and shared utilities.
feishu-drive
351.4k|
things-mac
351.4kManage Things 3 via the `things` CLI on macOS (add/update projects+todos via URL scheme; read/search/list from the local Things database)
