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.
- React: JavaScript library for building user interfaces.
- TypeScript: Typed superset of JavaScript for improved code quality.
- Material-UI: React components for a responsive design.
- 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.
- 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.
- Timestamps: Provide context with message timestamps.
- TypeScript Integration: Enhance code readability.
- Modern UI Design: Ensure a seamless user experience.
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.
- Emoji Support: Express yourself with a rich set of emojis.
- 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.
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.
-
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.
Contributions are welcome! If you encounter issues or have suggestions, open an issue or submit a pull request.
This project is licensed under the MIT License.