Chat App

# Chat App 💬

Chat App 🗨️ is a real-time messaging web application built with React, ShadCN, and Tailwind CSS. The app supports both group chats and direct messaging, enabling users to communicate seamlessly with others. It leverages socket.io for real-time updates, JWT for secure authentication, and MongoDB for scalable data storage.

🌟 Connect with friends, share media, and enjoy smooth, instant messaging with Chat App today!

🖼️ Home Page

🚀 Features at a Glance

• Real-Time Messaging: Enjoy seamless communication with real-time message delivery for group and direct chats.
• JWT Authentication: Secure login and user authentication using JWT tokens.
• File Upload/Download: Send and receive files with ease using Multer for media handling.
• Scalable Backend: MongoDB ensures smooth and reliable data storage for all users.
• Responsive UI: Designed for optimal performance across all devices, using Tailwind CSS for styling.

🛠️ Tech Stack

• Frontend: React.js ⚛️, ShadCN 🧩, Tailwind CSS 🎨
• Backend: Node.js, Express 🛠️
• Real-Time Messaging: socket.io 💬
• Authentication: JWT 🔑
• Database: MongoDB 🗄️
• File Handling: Multer 📁

🖥️ Live Demo

Experience the Chat App live:

• Frontend: Chat App Frontend
• Backend: Chat App Backend

🖼️ Screenshots

Group Chat

Direct Message

File Upload/Download

Chat Settings

Login Page

📦 Installation & Setup Guide

Follow these steps to set up the project on your local machine:

1. Clone the repository:

git clone https://github.com/abhishekcultivates/chat-app.git

2. Navigate to the project directory:

cd chat-app

3. Set up the Backend:

Navigate to the server directory:

cd server

Install the backend dependencies:

npm install

Create a .env file in the server directory with the following contents:

PORT=8747
JWT_KEY="your-jwt-secret-key-here"
ORIGIN="http://localhost:5173"
DATABASE_URL="mongodb+srv://username:[email protected]/dbname?retryWrites=true&w=majority"

Note: Replace DATABASE_URL with your MongoDB connection string if necessary.

Start the backend server:

npm run dev

The backend will be running at http://localhost:8747 (or whatever port you set in .env).

4. Set up the Frontend:

Navigate to the client directory:

cd ../client

Install the frontend dependencies:

npm install

Create a .env file in the client directory with the following contents:

VITE_SERVER_URL="http://localhost:8747"
VITE_SOCKET_URL="http://localhost:8747"

Note: When you are ready to deploy, change it to the production URLs and provide as environment variables.

Start the frontend development server:

npm run dev

The frontend will be running at http://localhost:5173.

5. Access the App:

Once both servers are running, you can open your browser and navigate to http://localhost:5173 to start using the app.

📩 Contact

For questions, suggestions, or feedback, feel free to reach out!

• Email: abhishekcultivates@gmail.com
• LinkedIn: Abhishek Raj
• Twitter: @a_cultivates

© 2024 Abhishek Raj