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.

🌐 Live Demo

Hosted on:
🔗 Render: https://blabber-front.onrender.com/

📊 Project Insights

🌟 Stars	🍴 Forks	🐛 Issues	🔔 Open PRs	🔕 Closed PRs	🛠️ Languages	👥 Contributors

⭐ 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.

👉 Give it a Star on GitHub

📦 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

🌟 Exciting News...

🚀 This project is now an official part of GirlScript Summer of Code – GSSoC'25! 💃🎉💻 We're thrilled to welcome contributors from all over India and beyond to collaborate, build, and grow Blabber! Let’s make learning and career development smarter – together! 🌟👨‍💻👩‍💻

👩‍💻 GSSoC is one of India’s largest 3-month-long open-source programs that encourages developers of all levels to contribute to real-world projects 🌍 while learning, collaborating, and growing together. 🌱

🌈 With mentorship, community support, and collaborative coding, it's the perfect platform for developers to:

• ✨ Improve their skills
• 🤝 Contribute to impactful projects
• 🏆 Get recognized for their work
• 📜 Receive certificates and swag!

🎉 I can’t wait to welcome new contributors from GSSoC 2025 to this Blabber project family! Let's build, learn, and grow together — one commit at a time. 🔥👨‍💻👩‍💻

⚙️ 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

1. Fork the repository and create a new branch for your changes.
2. Make your changes and ensure everything is working as expected.
3. 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.

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.

Show some by starring this awesome repository!

💡 Suggestions & Feedback

Feel free to open issues or discussions if you have any feedback, feature suggestions, or want to collaborate!

🙌 Show Your Support

If you find Blabber project helpful, give it a star! ⭐ to support more such educational initiatives:

• Giving the repo a ⭐ on GitHub
• Sharing it with your developer friends
• Contributing to the project

📄 License

This project is licensed under the MIT License - see the License file for details.

You are free to use, modify, and distribute this software under the terms of the license.

⭐ Stargazers

🍴 Forkers

🧑‍💻Project Admin:

Vijaya Mishra

👨‍🏫Mentors – Blabber (GSSoC'25)

Role	Name	GitHub Profile	LinkedIn Profile
Mentor 1	Nandini Pandey	nytrixis	nytrixis
Mentor 2	Sriman.H	srimanh	srimanh
Mentor 3	Mohit yadav	mont-y-001	monty001

Give us a Star and let's make magic!

👨‍💻 Built with ❤️ by Blabber Team

❤️ Vijaya Mishra and Contributors ❤️

Open an Issue | Watch Demo

⬆️ Back to Top

Ready to show off your coding achievements? Get started with Blabber today! 🚀