Note: PingNest is a fun, themeable, and emotion-aware chat platform built using the MERN stack. It is designed for expressive, real-time conversations with customization, emoji-style tones, and image support.

PingNest

A dynamic & responsive, emotion-driven real-time chat app with theme customization and photo support.

---

🔥 Features

• ✅ Emotion-Based Messaging: Choose the tone of your message from a dropdown. Each tone changes the message color — making chats more expressive.
• ✅ Theme Customization: Choose from multiple chat UI themes using DaisyUI.
• ✅ Real-Time Messaging: Messages appear instantly using Socket.IO.
• ✅ Chronological Ordering: Messages are sorted from newest to oldest.
• ✅ Online Status Viewer: See who’s currently active in real-time.
• ✅ Image Upload with Cloudinary: Upload and share photos directly in chat.

---

🛠 Tech Stack

Technology	Description
MongoDB	NoSQL Database
Express.js	Backend Framework
React.js	Frontend Library
Node.js	Runtime Environment
Socket.IO	Real-Time Communication
Cloudinary	Image Hosting & Delivery
Tailwind CSS	Utility-first Styling
DaisyUI	Theme & Component Library
JWT	Secure Authentication

---

📲 Getting Started

Prerequisites

• Node.js >= 14.x
• MongoDB Atlas or local MongoDB
• Cloudinary account (for image uploads)

Clone the Repository

git clone https://github.com/blackcat-007/PingNest-fullstack.git
cd PingNest-fullstack

Set Up Environment Variables

PORT=5000
MONGO_URI=your_mongodb_uri
JWT_SECRET=your_secret_key
CLOUDINARY_CLOUD_NAME=your_cloudinary_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_secret

Install Dependencies

npm install
cd client && npm install
cd ..

Run the App

npm run dev

The backend runs at localhost:5000 and frontend at localhost:3000

---

⚙️ App Features in Detail

📨 Emotion-Based Messaging

• Message tone dropdown with color-coded styling.

🎨 Theme Customization

• Switch between DaisyUI themes without reloading.

👀 Online Users Panel

• View who's currently active via sockets.

🖼 Image Uploading

• Drag and drop or upload images — stored via Cloudinary.

🔄 Message Sorting

• Newest messages appear first.

---

🚀 Deployment

Backend Tips:

• Use dotenv securely
• Enable CORS
• Use MongoDB Atlas

Frontend Tips:

• Run npm run build for production build
• Use platforms like Vercel/Netlify

---

🔒 Security

• Passwords hashed with bcrypt
• Authentication via JWT
• Image uploads protected with Cloudinary keys in .env

---

📄 License

This project is licensed under the Apache License 2.0.

© 2025 Shubho. All rights reserved under the Apache License 2.0.

---

👨‍💻 Author

Made with ❤️ by Shubho (blackcat-007)

🤝 Contributing

Pull requests are welcome. Fork it, improve it, PR it.

💬 Contact

• GitHub
• LinkedIn
• Gmail

---

📸 Screenshots

Sign in & Sign up with quick email id verification system

Chatting with tone selection and image support

Customise your profile and upload profile picture

Customise your theme with 32 available themes