PlayBox
A full-stack video streaming platform built entirely from scratch using the MERN stack.
Overview
Engineered a robust backend using Express and Node.js, featuring secure JWT authentication, Bcrypt password hashing, and seamless media uploads via Cloudinary.
Designed an interactive, responsive frontend using React, Vite, and Tailwind CSS, providing a modern, fast, and accessible user interface.
Implemented a comprehensive video streaming and playback experience using video.js and complex state management with Redux Toolkit.
Key Challenges:
- •Handling large video file uploads, processing, and streaming efficiently without causing memory leaks or server crashes.
- •Designing a scalable MongoDB schema to handle complex relationships between users, videos, comments, likes, and subscriptions.
Built With
React
Frontend Library
Redux
State Management
Node.js
Backend Runtime
Express
Backend Framework
MongoDB
Database
Tailwind CSS
Styling
Key Features
Video Streaming
High-performance video playback using video.js, with support for smooth buffering and quality controls.
Secure Authentication
Robust user authentication and session management using JWT and secure, HTTP-only cookies.
Cloud Media Storage
Direct integration with Cloudinary for fast, reliable, and optimized video and image hosting.
Complex State Management
Utilized Redux Toolkit to predictably manage complex application state, caching, and data synchronization.
Interactive UI
Built a highly responsive and accessible UI using Radix UI primitives and Tailwind CSS for rapid styling.
Social Features
Fully hand-coded backend logic for commenting, liking, subscribing, and viewing history.
Visual Showcase
Development Journey
Backend Foundation
- Designed MongoDB schemas for users, videos, and interactions
- Implemented JWT authentication and security middleware
- Integrated Cloudinary for media uploads and processing
Frontend Development
- Set up React + Vite with Tailwind CSS and Radix UI
- Built video player, dashboard, and interaction components
- Configured Redux Toolkit for complex global state
Integration & Polish
- Connected frontend components to REST APIs
- Handled error states, loading skeletons, and edge cases
- Optimized video streaming performance and UI responsiveness
Looking for a Full-Stack Developer?
I'm actively seeking opportunities to join a great team and contribute to exciting products. Drop me a message!