Blabber
Blabber is a modern full-stack social media web application built using the MERN stack. It allows users to register, log in, post updates, follow other users, receive notifications, and maintain profiles. It uses JWT authentication with secure HttpOnly cookies and Cloudinary for profile image uploads.
Install / Use
/learn @Vijayaa21/BlabberREADME
<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" width="100%">Blabber is a modern full-stack social media web application built using the MERN stack. It allows users to register, log in, post updates, follow other users, receive notifications, and maintain profiles. It uses JWT authentication with secure HttpOnly cookies and Cloudinary for profile image uploads.
🌐 Live Demo
Hosted on:
🔗 Render: https://blabber-front.onrender.com/
📊 Project Insights
<table align="center"> <thead align="center"> <tr> <td><b>🌟 Stars</b></td> <td><b>🍴 Forks</b></td> <td><b>🐛 Issues</b></td> <td><b>🔔 Open PRs</b></td> <td><b>🔕 Closed PRs</b></td> <td><b>🛠️ Languages</b></td> <td><b>👥 Contributors</b></td> </tr> </thead> <tbody> <tr> <td><img alt="Stars" src="https://img.shields.io/github/stars/Vijayaa21/Blabber?style=flat&logo=github"/></td> <td><img alt="Forks" src="https://img.shields.io/github/forks/Vijayaa21/Blabber?style=flat&logo=github"/></td> <td><img alt="Issues" src="https://img.shields.io/github/issues/Vijayaa21/Blabber?style=flat&logo=github"/></td> <td><img alt="Open PRs" src="https://img.shields.io/github/issues-pr/Vijayaa21/Blabber?style=flat&logo=github"/></td> <td><img alt="Closed PRs" src="https://img.shields.io/github/issues-pr-closed/Vijayaa21/Blabber?style=flat&color=critical&logo=github"/></td> <td><img alt="Languages Count" src="https://img.shields.io/github/languages/count/Vijayaa21/Blabber?style=flat&color=green&logo=github"></td> <td><img alt="Contributors Count" src="https://img.shields.io/github/contributors/Vijayaa21/Blabber?style=flat&color=blue&logo=github"/></td> </tr> </tbody> </table> <img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" width="100%">⭐ Like the Project?
If you find this project useful or interesting, consider starring 🌟 the repository to show your support! It motivates me to keep improving and adding more features.
<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" width="100%">📦 Tech Stack
- Frontend: React, React Router DOM, TailwindCSS, React Query, React Hot Toast
- Backend: Node.js, Express.js, MongoDB
- Auth: JWT with HttpOnly Cookies
- Image Upload: Cloudinary
- State Management: React Query
- Hosting: Render
🚀 Features
- 🧾 User Authentication (Signup, Login, Logout)
- 🏠 Home Feed
- 🔔 Notifications
- 👥 User Profiles with Follow/Unfollow
- 📸 Profile Image Upload
- 🧠 React Query for Data Fetching
- 🌈 Responsive UI
- 🔐 Secure JWT & Cookie-based Auth
⚙️ Getting Started Locally
1. Clone the Repository
git clone https://github.com/Vijayaa21/blabber.git
cd blabber
2. Install Dependencies
Backend
cd backend
npm install
Frontend
cd ../frontend
npm install
3. Create Environment Files
✅ .env for Backend (in /backend)
cd backend
mv .env.example .env
Then edit .env and add your credentials:
PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
✅ Make sure your MongoDB database is up and running.
4. Start the App
Option 1: Run Backend and Frontend Separately
# Start Backend
cd backend
npm run dev
# Start Frontend
cd ../frontend
npm run dev
Option 2: Use Root-Level Concurrent Script
If your project has a root-level package.json, add this:
"scripts": {
"dev": "concurrently \"npm run server\" \"npm run client\"",
"server": "cd backend && nodemon server.js",
"client": "cd frontend && npm run dev"
}
Then run:
npm run dev
🌐 Deployment Notes
⚙️ CORS Settings for Production (Backend)
app.use(cors({
origin: "https://your-frontend-url.onrender.com",
credentials: true
}));
🍪 Cookie Settings (for JWT in generateTokenAndSetCookie.js)
res.cookie("jwt", token, {
maxAge: 15 * 24 * 60 * 60 * 1000, // 15 days
httpOnly: true,
sameSite: "None", // ✅ Needed for cross-origin cookies
secure: true // ✅ Required for HTTPS (e.g. Render)
});
📁 Project Structure
blabber/
├── backend/
│ ├── controllers/
│ ├── models/
│ ├── routes/
│ ├── utils/
│ ├── server.js
|
├── frontend/
│ ├── src/
│ │ ├── components/
│ │ ├── pages/
│ │ └── App.jsx
│ ├── public/
│ └── .env
├── .env
└── README.md
👥 Author
Built by Vijaya Mishra 💻
Open to contributions, suggestions, and collaboration!
🤝 Contributing
We love contributions from the community! Whether it's a bug report, a new feature, or a documentation improvement, we appreciate your help.
How to Contribute
- Fork the repository and create a new branch for your changes.
- Make your changes and ensure everything is working as expected.
- Submit a pull request with a clear description of your changes.
Found a Bug?
- Check the issue tracker to see if the bug has already been reported.
- If not, open a new issue and provide as much detail as possible.
Have a Feature Idea?
- We'd love to hear it! Open an issue to discuss your idea.
📜 Code of Conduct
Please refer to the Code of Conduct for details on contributing guidelines and community standards.
🤝👤 Contribution Guidelines
We love our contributors! If you'd like to help, please check out our CONTRIBUTE.md file for guidelines.
<!-- Contributors badge (auto-updating) -->Thank you once again to all our contributors who has contributed to Blabber! Your efforts are truly appreciated. 💖👏
See the full list of contributors and their contributions on the GitHub Contributors Graph.
💡 Suggestions & Feedback
Feel free to open issues or discussions if you have any feedback, feature suggestions, or want to collaborate!
<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a
