SocioStackNG

🚀 Overview

SocioStackNG is a modern full-stack social media platform that combines sleek design, real-time interactions, and scalable architecture. Built with React, Node.js, and MongoDB, this project is perfect for learning, collaboration, or serving as a foundation for your next social platform.

---

💡 Features

Real-Time Interactions

• Live messaging system with unread marks
• Instant notifications for likes, comments, and follows
• Real-time post updates with Socket.IO

Modern UI/UX

• Material-UI components with custom theming
• Dark/Light mode support
• Responsive design (PWA-ready)
• Smooth animations and transitions
• Infinite scroll for optimized performance

Smart Features

• Intelligent user suggestions
• Post filtering (All/Liked/Following)
• Image optimization with Cloudinary
• Debounced notifications
• Custom event handling for real-time updates

Security First

• JWT-based authentication
• Secure cookie handling
• Protected routes
• Input validation
• Image size and format validation

---

🛠️ Tech Stack

Frontend

• React 18 with Hooks and Context
• Material-UI v6 for modern design
• Axios for API calls
• React Router v7 for routing
• Socket.IO client for real-time updates

Backend

• Node.js with Express for server-side logic
• MongoDB with Mongoose for database management
• JWT for secure authentication
• Socket.IO for WebSocket communication
• Cloudinary for image upload and optimization

---

📱 Key Functionalities

Performance Optimization

• Lazy loading for images
• Debounced API calls
• Optimized image compression

Enhanced User Experience

• Custom scrollbars
• Smooth hover effects
• Responsive image galleries
• Toast notifications

Real-World Features

• Follow/Unfollow system
• Like/Unlike posts
• Comment system
• Profile customization
• Image uploads with Cloudinary integration
• User bios and personal links

---

🌟 Learning Outcomes

This project provided opportunities to:

• Implement real-time WebSocket communication with Socket.IO
• Manage complex state efficiently using React Context
• Handle real-time data synchronization
• Design scalable MongoDB schemas
• Build secure authentication flows with JWT
• Optimize performance for large datasets

---

🔗 How to Run Locally

Prerequisites:

• Node.js installed on your machine
• MongoDB instance running
• Cloudinary account for image uploads

Steps:

1. Clone the repository:

   git clone https://github.com/Nischaya008/SocioStackNG

2. Navigate to the project directory:

   cd sociostackng

3. Install dependencies:

   cd backend #Install Backend
   npm install
   cd frontend #Install Frontend
   npm install --force

4. Configure environment variables:
   • Create a .env file in the root directory and add the following:

     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

5. Start the development server:

   cd backend 
   npm run dev
   cd frontend
   npm start

6. Open the app in your browser at http://localhost:3000

---

🤝 Contributions

Contributions are welcome! Feel free to open issues or submit pull requests to improve this project. Let’s make it better together.

---

📄 License

This project is licensed under the MIT License. Feel free to use it for personal or commercial projects but give proper credits :).

---

💬 Let’s Connect

I’d love to hear your thoughts on SocioStackNG. Whether it’s feedback, collaboration, or just a quick chat about tech, feel free to reach out. Let’s build something amazing together!

• Email: nischayagarg008@gmail.com
• LinkedIn: Nischaya Garg
• Twitter: Nischaya008

Stay Innovated, Keep Coding, Think BIG! 🚀