A modern real-time chat application built with React, Firebase, and Vite. Features instant messaging, user authentication, profile management, and image sharing capabilities with a clean, responsive interface.
- 💬 Real-time Messaging - Instant chat with Firebase Firestore
- 🔐 User Authentication - Register, login, and password reset
- 👤 Profile Management - Update profile with avatar and bio
- 📷 Image Sharing - Upload and share images in chats
- 🔍 User Search - Find and connect with other users
- 📱 Responsive Design - Works on desktop, tablet, and mobile
- 🟢 Online Status - See when users were last active
- 🔔 Message Notifications - Toast notifications for better UX
- Authentication Flow: Secure login/signup with Firebase Auth
- Real-time Chat: Live message updates using Firestore listeners
- User Discovery: Search and add new chat contacts
- Media Sharing: Upload and display images in conversations
- Profile Customization: Personalize your profile with avatar and bio
- Responsive UI: Clean interface that works across all devices
- Frontend: React 19, Vite, React Router DOM
- Backend: Firebase (Authentication, Firestore, Storage)
- Styling: CSS3 with custom styles
- Notifications: React Toastify
- State Management: React Context API
- Node.js (v18+)
- Firebase account and project setup
-
Clone the repository:
git clone https://github.com/tlamDson/chat-app.git cd chat-app -
Install dependencies:
npm install
npm run dev
- Sign Up/Login - Create a new account or login with existing credentials
- Profile Setup - Update your profile with name, avatar, and bio
- Find Users - Search for other users by username in the left sidebar
- Start Chatting - Click on a user to start a conversation
- Send Messages - Type and send text messages or share images
- Real-time Updates - Messages appear instantly for all participants
Built with ❤️ by tlamDson