✨ Full Stack Realtime Chat App

This is a full stack real-time chat application built using React.js, Node.js, Express.js, and MongoDB. The application allows users to chat in real-time with each other, send messages, and share files.

🚀 Features

• Real-time messaging using Socket.io
• Authentication & Authorization with JWT
• Online user status (real-time)
• Global state management with Zustand
• Message notifications
• Responsive UI using Tailwind CSS and DaisyUI
• File sharing
• Error handling (both client and server)
• Clean and maintainable code structure

💻 Tech Stack

Frontend

• React.js with Vite
• Socket.io-client for real-time communication
• Zustand for state management
• TailwindCSS & DaisyUI for styling
• React Hot Toast for notifications
• React Router DOM for routing

Backend

• Node.js & Express.js
• MongoDB with Mongoose
• Socket.io for real-time communication
• JWT for authentication
• Bcrypt for password hashing

🛠️ Installation & Setup

1. Clone the repository

git clone <repository-url>
cd fullstack-chat-app

2. Install dependencies for both frontend and backend

npm install

3. Set up environment variables Create a .env file in the backend directory with the following variables:

MONGODB_URI=your_mongodb_uri
PORT=5001
JWT_SECRET=your_jwt_secret
NODE_ENV=development

# If using Cloudinary for file uploads
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

4. Build the application

npm run build

5. Start the application

npm start

📚 What I Learned

1. Real-time Communication

   • Implementing bidirectional communication using Socket.io
   • Managing real-time events and states
   • Handling online/offline user status

2. State Management

   • Using Zustand for global state management
   • Managing complex application states
   • Implementing persistent storage

3. Authentication & Security

   • JWT-based authentication flow
   • Protecting routes and resources
   • Secure password handling

4. Modern Frontend Development

   • Building responsive UIs with TailwindCSS
   • Component-based architecture with React
   • Custom hooks and reusable components

5. Backend Development

   • RESTful API design
   • MongoDB database operations
   • Error handling and validation

6. Full Stack Integration

   • Connecting frontend and backend
   • Managing environment variables
   • Deployment strategies

buddychat