⚡ Vibesy

A full-stack MERN (MongoDB • Express • React • Node.js) real-time chat application that brings the social vibes alive with instant messaging, online presence tracking, JWT authentication, global state via Zustand and beautiful theming with TailwindCSS + DaisyUI.

📸 Integrated with Cloudinary for smooth media uploads and profile image handling.
🎨 Switch between 16 DaisyUI themes to personalize your chat experience.

🌐 Live Demo: https://Vibesy.onrender.com

---

✨ Features

• 💬 Real-time 1:1 messaging via Socket.io
• 🔐 JWT-based authentication & protected routes
• 👤 Online user status indicator
• 📸 Upload avatars/images using Cloudinary
• 🎨 16 themes powered by DaisyUI
• 🌈 Light/Dark mode support
• 🧠 Global state management with Zustand
• ⚠️ Proper client & server-side error handling
• 🚀 Fast and responsive UI with TailwindCSS
• 🧩 Clean code and organized architecture for scalability

---

📦 Project Dependencies – Why Each One Matters

• ⚛️ React 19 – Modern, component-driven UI building
• ⚡ Vite 6 – Blazing-fast frontend bundler with instant HMR
• 🧠 Zustand – Lightweight state management made easy
• 🔌 Socket.io – Enables real-time, bidirectional messaging
• 🌬️ TailwindCSS 3 – Utility-first CSS for fast design
• 💅 DaisyUI – Prebuilt Tailwind components + theme support
• 🛣️ React Router 7 – Modern client-side routing
• 🍞 React Hot Toast – Toast notifications for feedback
• 🔒 JWT – Secure authentication and protected endpoints
• 🧾 Axios – HTTP client for API requests
• 🌐 Express 5 – Minimal backend API framework
• 🧰 Mongoose 8 – Schema-driven data modeling with MongoDB
• ☁️ Cloudinary – Cloud-based media storage & image delivery
• 🔐 dotenv – Secure environment variable management
• 🔄 Nodemon – Auto-reloading dev server
• 🛡️ CORS – Cross-origin resource sharing for secure API access
• 🔒 bcryptjs – Password hashing for secure auth

---

🚀 Deployment on Render – How & Why

• 📦 Monorepo Setup – Frontend and backend in one repo for unified deployment
• 🔁 Render Commands:
  • npm run build (frontend) → Installs dependencies and builds the frontend
  • npm start (backend) → Runs the Express backend, serving frontend via static files

🔑 Environment Variables (set in Render Dashboard):

PORT, MONGODB_URI, JWT_SECRET

CLOUDINARY_CLOUD_NAME, CLOUDINARY_API_KEY, CLOUDINARY_API_SECRET

• 🔑 Environment Variables set via Render dashboard:
  • MONGODB_URI, JWT_SECRET
  • CLOUDINARY_CLOUD_NAME, CLOUDINARY_API_KEY, CLOUDINARY_API_SECRET
• 🔗 Single Live URL – Frontend and backend hosted together for simplified CORS & API calls

👉 Why Render?
It’s dev-friendly, supports auto-deploys from GitHub, handles monorepos well, and includes a generous free tier.

---

🧪 Future Enhancements

• 🧑‍🤝‍🧑 Group chats or communities
• 📷 Image sharing in chat
• 🗑️ Delete message support
• 📨 Message seen/read indicators
• 📱 PWA support for mobile use
• 🌍 Language toggle & accessibility improvements

---

📜 License – What You Can Do

This project is licensed under the ISC License.

• ✂️ You can:
  • Use, modify, and distribute the code for personal or commercial projects
  • Add your own branding or features
• ❗ You must:
  • Preserve the license and give credit to the original creator

---

👨‍💻 Author

• Name: Pratyush Panda
• GitHub: @pratyushpanda91
• X (Twitter): @pandapratyush91
• LinkedIn: pratyushpanda91

---

💡 Vibesy is built to make real-time chat feel fun, personalized and smooth — the way social apps should be.