Affina
Built a full-stack social media platform with secure JWT authentication, media uploads, post interactions, and responsive user experience. Implemented RESTful APIs for posts, likes, comments, and profile management, with Cloudinary integration for optimized image handling.
Tech Stack
Frontend
Backend
Tools
Project Highlights
Full-Stack Social Media Platform
Built using the MERN stack with secure authentication, media uploads, and user interaction systems.
Authentication & Protected Routes
JWT-based authentication system with secure password hashing and route protection.
Post Creation & Media Uploads
Users can create, edit, and delete posts with text and image upload support.
Social Interactions
Implemented like/unlike functionality and comment systems with immediate UI feedback.
User Profiles
Profile pages with avatar uploads, personalized user data, and post history.
Responsive User Experience
Mobile-first responsive interface designed for seamless interaction across devices.
TECHNICAL IMPLEMENTATION
Authentication System:
Built secure authentication workflows with protected routes and persistent login handling.
- JWT-based authentication and route protection
- Password hashing using bcrypt
- Persistent authentication state management
Post & Interaction System:
Developed core social media functionality for content creation and engagement.
- Create, edit, and delete user posts
- Like/unlike interactions with immediate UI updates
- Comment system with dynamic rendering
Media Upload Pipeline:
Implemented optimized image upload and delivery workflows for user-generated content.
- File handling using Multer middleware
- Cloudinary integration for cloud image storage
- Optimized image delivery using CDN infrastructure
Global State Management:
Managed shared application state across authentication and post workflows.
- React Context API for centralized state management
- Separate auth and post contexts
- Axios integration for API communication
Engineering Challenges Solved
- • Managed authentication and user session persistence across protected application routes.
- • Handled media upload workflows by integrating Multer for processing and Cloudinary for scalable image storage.
- • Implemented optimistic UI updates for likes and comments to provide immediate feedback while maintaining API consistency.
- • Structured reusable state management using React Context API to reduce prop drilling across components.
- • Designed responsive layouts to maintain usability across desktop and mobile devices.