Simple Chat App

Real-Time Chat Application

Welcome to the Real-Time Chat Application! This project utilizes a modern tech stack to provide a seamless, real-time messaging experience. Below is an overview of the features and technologies used.

🚀 Tech Stack Overview

• MERN Stack: A full-stack solution combining MongoDB, Express, React, and Node.js.
• Socket.io: Facilitates real-time, bidirectional communication between the client and server.
• TailwindCSS & DaisyUI: Offers a modern, responsive UI with a utility-first CSS approach and pre-built components.

🔐 Secure Authentication & Authorization

• Google OAuth: Enables smooth login and registration using Gmail.
• Email Authentication: Provides secure registration and login via email, including password recovery options.
• JWT Integration: Manages user sessions securely and protects routes using JSON Web Tokens.

⚡ Instant Messaging

• Real-Time Chat: Facilitates immediate message exchanges for a responsive user experience.
• Typing Indicators: Provides real-time feedback when users are typing, enhancing interaction.

🌟 User Presence & Status Tracking

• Socket.io & React Context: Displays real-time online/offline status of users.
• Presence Management: Monitors user activity and participation in chat rooms.

🛠️ Efficient Global State Management

• Zustand: Manages global state efficiently, including user data, chat history, and UI state.
• Optimized Performance: Avoids unnecessary re-renders with effective state management.

🔧 Comprehensive Error Handling

• Server-Side Errors: Implements graceful error responses and logging using Express middleware.
• Client-Side Errors: Provides user-friendly error messages and feedback mechanisms.

✨ Toast Notifications Library

• Real-Time Alerts: Uses a toast library for displaying user-friendly notifications and feedback.
• Customizable Toasts: Easily configures and styles notifications for various events (e.g., success, error).

🌐 Professional Deployment for Free

• Free Hosting Platforms: Deploys the application using platforms such as Vercel, Netlify (frontend), and Heroku, Render, or Railway (backend).
• CI/CD Pipelines: Automates deployment processes for continuous integration and updates.

🎯 And Much More!

• Scalability: Designed to handle growing user demand and activity efficiently.
• Customization: Features and themes can be customized to suit different needs and preferences.
• Security: Implements robust measures for data protection and secure interactions.

🔗 Preview the Project

Check out the live demo of the Real-Time Chat Application at Simple-chat-app/.

Feel free to adjust or expand any sections to better fit your project details and goals!

A real-time chat application built with React for the frontend and Express for the backend.

Getting Started

Clone the Repository

1. Clone the repository:

   git clone https://github.com/mitesh092/SimpleChatApp.git

2. Navigate into the project directory:

   cd SimpleChatApp

Backend Setup and Usage

1. Navigate to the backend directory:

   cd backend

2. Install dependencies:

   npm install

3. Start the backend server:

   npm run server

   The backend server should now be running on http://localhost:5000 (or your configured port).

Frontend Setup

open new terminal in vscode

1. Navigate to the frontend directory:

   cd ./frontend

2. Install dependencies:

   npm install

3. Start the React development server:

   npm dev run

   The React app should now be running on http://localhost:5001 (or your configured port).

Usage

1. Open http://localhost:5001 in your browser to start using the chat app.

Technologies Used

• Frontend: React
• Backend: Express
• Optional: WebSocket for real-time messaging

Contributing

1. Fork the repository
2. Create a new branch
3. Commit and push changes
4. Open a pull request

License

This project is licensed under the MIT License - see the LICENSE file for details.