A modern, full-featured real-time chat application built with React, Firebase, and TailwindCSS. Users can authenticate, manage profiles, send messages with images, and chat in real-time with a beautiful, responsive interface.
- 🔐 Authentication – Secure login/signup with Firebase Auth
- 👤 Profile Management – Update profile with avatar, name, and bio
- 💬 Real-Time Messaging – Instant message delivery with Firebase Firestore
- 📷 Image Sharing – Send and receive images in chats
- 👥 User Search – Find and add new contacts by username
- 📱 Responsive Design – Works on desktop and mobile devices
- 🎨 Modern UI – Clean interface with TailwindCSS
- 📍 Protected Routes – Authentication-based navigation
- ⚡ Real-Time Updates – Live chat lists and message updates
- 🔔 Message Status – Read/unread message indicators
- Frontend: React 18, React Router v6, Context API
- Backend: Firebase Firestore (Real-time Database)
- Authentication: Firebase Authentication
- Storage: Firebase Cloud Storage (for images)
- Styling: TailwindCSS
- Notifications: React Toastify
- Build Tool: Vite
client/
├── src/
│ ├── assets/ # Static assets like images and icons
│ ├── components/ # Reusable components (leftSideBar, chatBar, etc.)
│ ├── config/ # Firebase configuration file
│ ├── context/ # AppContext for global state
│ ├── pages/ # Page components (Chat, Login, UpdateProfile)
│ ├── App.jsx # Main app component with routing
│ └── main.jsx # Application entry point
├── .env.local # Environment variables for Firebase keys
└── package.json
git clone https://github.com/Ajay05532/Chat-App.git
cd chat-application/clientnpm install- Go to Firebase Console
- Click "Create a project" or "Add project"
- Enter your project name (e.g., "my-chat-app")
- Choose whether to enable Google Analytics (optional)
- Click "Create project"
- In your Firebase project, go to "Authentication" in the left sidebar
- Click "Get started"
- Go to "Sign-in method" tab
- Enable "Email/Password" provider
- Click "Save"
- Go to "Firestore Database" in the left sidebar
- Click "Create database"
- Choose "Start in test mode" (for development)
- Select your preferred location
- Click "Done"
- Go to "Storage" in the left sidebar
- Click "Get started"
- Choose "Start in test mode"
- Select your preferred location
- Click "Done"
- Go to "Project settings" (gear icon)
- Scroll down to "Your apps" section
- Click "Web" icon (</>) to add a web app
- Enter your app name and click "Register app"
- Copy the Firebase configuration object
Create a .env.local file in your project root client/:
VITE_API_KEY=your_api_key_here
VITE_AUTH_DOMAIN=your_project_id.firebaseapp.com
VITE_PROJECT_ID=your_project_id
VITE_STORAGE_BUCKET=your_project_id.appspot.com
VITE_MESSAGING_SENDER_ID=your_messaging_sender_id
VITE_APP_ID=your_app_id
VITE_MEASUREMENT_ID=your_measurement_idReplace the values with your actual Firebase configuration values.
npm run devThe app will be available at http://localhost:port
Contributions are welcome! If you'd like to improve the app, please fork the repository and create a pull request with your changes.
- Fork the Project
- Create your Feature Branch (git checkout -b feature/AmazingFeature)
- Commit your Changes (git commit -m 'Add some AmazingFeature')
- Push to the Branch (git push origin feature/AmazingFeature)
- Open a Pull Request
If you encounter any issues or have questions:
- Check the Issues page
- Create a new issue with detailed information
- Provide error messages and steps to reproduce
- Include your environment details (OS, Node.js version, etc.)
Happy Chatting! 💬