SocioVerse

Overview

A full-stack, scalable social media web application designed to connect users through dynamic content sharing, social engagement, and profile personalization. Architected with a decoupled MERN stack (MongoDB, Express, React, Node.js), SocioVerse delivers smooth social networking workflows including feeds, media uploads, interactive engagement systems, and relational user networks.

Key Features

• Interactive Social Feed: Algorithmic-ready dynamic feeds displaying paginated community posts, media attachments, and timestamps.

• Engagement Suite: Instant post liking, nested commenting threads, and bilateral follow/unfollow connection tracking.

• User Profiles & Customization: Rich user profiles featuring customizable bios, location metadata, occupations, profile banners, and avatars.

• Decentralized Media Handling: Scalable image upload pipelines leveraging MongoDB GridFS for chunk-based binary asset streaming and storage.

• Secure Authentication & Sessions: Stateless JSON Web Token (JWT) authorization workflow with password hashing (bcrypt) and protected API route middleware.

• Adaptive UI/UX: Polished dark/light theme switching and responsive desktop-to-mobile layouts powered by Material UI (MUI).

Tech Stack & Architecture

• Frontend: React, Redux Toolkit (global state & persistence), Material UI (MUI), Emotion

• Backend: Node.js, Express.js (REST API architecture)

• Database & Storage: MongoDB, Mongoose ODM, MongoDB GridFS / Multer (binary file chunk storage)

• Security & Utilities: JWT (JSON Web Tokens), bcryptjs, Dotenv, CORS

Technical Challenges & Solutions

1. Large Media Ingestion & Storage Optimization

• Challenge: Traditional database storage bloats document size limits (16MB BSON limit in MongoDB), while storing files locally on the backend server limits horizontal scaling.

• Solution: Integrated MongoDB GridFS alongside Multer storage engines. Files are split into $255\text{ KB}$ chunk streams, allowing high-performance upload/download streaming of images directly through database clusters without violating single-document limitations.

2. Normalized State Across Deeply Nested Social Graph Actions

• Challenge: Keeping like counts, follow states, and comment threads synchronized in real time across the home feed, search, and profile views without redundant backend re-fetching.

• Solution: Structured centralized state slices with Redux Toolkit (RTK). Normalized server payloads ensure that updating a post's reaction map or toggling a follow state optimistically mutates cached states across all active feed views instantly.

Key Takeaways

Highlights deep knowledge of the core MERN architecture: building secure RESTful APIs, managing client-side caching with Redux, handling raw binary streams via GridFS, and building production-ready user relationship schemas.