ChatApp 🗨️

A real-time chat application built with the MERN stack, JWT Authentication, TailwindCSS, DaisyUI, and Socket.IO. Dive into a seamless chatting experience with a modern UI, real-time communication, and secure user authentication.

Features 🌟

• User Authentication:
  Secure login and signup with JWT-based authentication.
• Real-Time Chat:
  Experience instant messaging powered by Socket.IO.
• Modern UI with Glassmorphism:
  Built with TailwindCSS, enhanced by DaisyUI, and styled with a stunning glassmorphic design for a sleek and futuristic interface.
• User-Friendly Design:
  Intuitive and clean interface for effortless chatting.
• Persistent Sessions:
  Stay logged in with secure token storage and automatic session renewal.
• Lightweight Backend:
  Efficient API endpoints for all core functionalities, including chat history retrieval.

Tech Stack 🛠️

Frontend

• React.js with TailwindCSS, DaisyUI, and glassmorphic styling
• Axios for API calls

Backend

• Node.js and Express.js
• MongoDB with Mongoose for database modeling
• JWT for secure authentication

Real-Time Communication

• Socket.IO

Screenshots 📸

Login Screen	Chat Interface

Getting Started 🚀

Prerequisites

• Node.js and npm installed
• MongoDB database setup

Setup Instructions

Clone the Repository

git clone https://github.com/your-username/chatapp.git  
cd chatapp  

Backend Setup

1. Navigate to the server directory:

   cd server  
   

2. Install dependencies:

   npm install  
   

3. Create a .env file with the following variables:

   PORT=5000  
   MONGO_URI=your-mongodb-connection-string  
   JWT_SECRET=your-secret-key  
   

4. Start the server:

   npm start  
   

Frontend Setup

1. Navigate to the client directory:

   cd ../client  
   

2. Install dependencies:

   npm install  
   

3. Start the development server:

   npm start  
   

Usage 🖥️

1. Sign up or log in to your account.
2. Enter a chat room or start a private conversation.
3. Enjoy real-time messaging with a beautiful glassmorphic interface.

Folder Structure 📂

Backend (server/)

• models/: Mongoose schemas for users and messages
• routes/: API endpoints
• controllers/: Business logic for authentication and messaging
• middleware/: JWT verification

Frontend (client/)

• components/: Reusable UI components
• pages/: Main views (e.g., login, chat)
• context/: Context API setup for global state management

Contributing 🤝

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a new branch (feature/your-feature)
3. Commit your changes
4. Push to the branch
5. Open a pull request

Contact 📧

Feel free to reach out with questions, suggestions, or contributions!

Developer: Aniket Misra