Portfolio
Projects & Case Studies
Every project here includes a full case study — the real problem I was solving, my approach, the technical architecture, and what I learned along the way.
5 Projects
4 Live deployments
All with full case studies
Featured Project
MovieVerse Premium
A cinematic streaming interface built for the modern web.
A production-ready movie streaming interface featuring cinematic design, smooth micro-animations, and real-time data fetching from a public movie API.
React
Tailwind CSS
Node.js
MongoDB
Case Study — MovieVerse Premium
The Problem
Most movie streaming interfaces feel cluttered and overwhelming — too many clicks to find what you want, poor mobile experiences, and slow loading times that break immersion.
The Solution
Built a clean, card-based interface with a focus on visual hierarchy, fast content loading, and a dark cinematic aesthetic. Implemented client-side filtering and search to minimise friction.
Key Features
- ▹Real-time movie search and filtering by genre, rating, and release year
- ▹Responsive card grid with smooth hover animations and skeleton loading states
- ▹Movie detail modal with trailers, cast information, and related titles
- ▹Persistent watchlist stored in MongoDB, accessible across sessions
Challenges & Lessons
Handling API rate limits gracefully while keeping the UI responsive required implementing debounced search and an intelligent caching layer. Managing state across multiple filter dimensions without a state management library was also a key architectural decision.
Architecture
React SPA → Node.js/Express API → MongoDB Atlas → Deployed on Vercel + Railway
Featured Project
iOUTS Management System
Digitising outing management with QR-code real-time tracking.
A digital outing management system for institutions, replacing paper-based processes with QR-code scanning, real-time status tracking, and a centralised admin dashboard.
PHP
JavaScript
Bootstrap
MySQL
Case Study — iOUTS Management System
The Problem
Manual outing approval and tracking at educational institutions is slow, error-prone, and difficult to audit. Staff relied on paper forms that were frequently lost or delayed.
The Solution
Developed a full-stack web system that automates the outing request, approval, and tracking workflow. Students submit digital requests; staff approve via dashboard; QR codes enable real-time check-in/check-out at gates.
Key Features
- ▹QR code generation per student outing request for gate-scan check-in/check-out
- ▹Role-based access control (Student, Warden, Admin) with separate dashboards
- ▹Real-time outing status updates with timestamp logging for full audit trail
- ▹Automated notifications to wardens upon new student outing requests
- ▹Responsive Bootstrap UI optimised for both desktop and mobile staff use
Challenges & Lessons
Designing the role-based access system to be secure yet simple enough for non-technical staff was a significant challenge. Ensuring QR code uniqueness and preventing duplication attacks required careful token generation logic.
Architecture
PHP (MVC) → MySQL → Bootstrap → Deployed on shared hosting (iouts.online)
Featured Project
Interactive Art Gallery
An immersive digital gallery with spatial audio and dynamic soundscapes.
A fully immersive browser-based art gallery featuring spatial audio that responds to cursor position, dynamic lighting effects, and smooth room-to-room navigation.
Next.js
Framer Motion
Tailwind CSS
Web Audio API
Source Code Unavailable
Case Study — Interactive Art Gallery
The Problem
Digital art galleries feel flat and disconnected from the physical experience — static images on a page do not replicate the ambience and immersion of walking through a real gallery.
The Solution
Leveraged the Web Audio API to create positional soundscapes that respond to where the user's cursor is in the room. Combined with Framer Motion's layout animations and CSS perspective transforms to simulate spatial depth.
Key Features
- ▹Cursor-reactive spatial audio that pans and fades based on artwork proximity
- ▹Smooth room transitions with directional slide animations via Framer Motion
- ▹Dynamic ambient lighting that shifts per artwork using CSS radial gradients
- ▹Fullscreen immersive mode for distraction-free viewing
Challenges & Lessons
The Web Audio API's PannerNode requires careful calibration to feel natural rather than gimmicky. Cross-browser audio autoplay restrictions also required a deliberate user-interaction gate before audio could start.
Architecture
Next.js (App Router) → Framer Motion → Web Audio API → Tailwind CSS
Featured Project
SDE Corporate Website
A professional, SEO-optimised corporate presence for an engineering firm.
A fully responsive corporate website built for SDE Group — an engineering solutions company — with a strong emphasis on professional aesthetics, clear service communication, and search engine visibility.
HTML
CSS
Bootstrap
JavaScript
Case Study — SDE Corporate Website
The Problem
SDE Group lacked a professional online presence, making it difficult for potential clients and partners to find them, understand their services, or make contact. Their brand was not represented digitally at all.
The Solution
Designed and built a clean, corporate-grade website from scratch, working directly with the client to understand their brand identity, target audience, and key services. Implemented structural SEO from day one.
Key Features
- ▹Fully responsive layout optimised for desktop, tablet, and mobile viewports
- ▹Semantic HTML5 structure with proper heading hierarchy for search engine crawlability
- ▹Service showcase section with clear calls-to-action for lead generation
- ▹Contact form integrated with the client's business email
- ▹Performance-optimised with compressed images and minimal JavaScript
Challenges & Lessons
Translating the client's offline brand identity (colours, tone, values) into a coherent digital design required close collaboration and multiple feedback rounds. Balancing their aesthetic preferences with technical SEO requirements was the core design challenge.
Architecture
Static HTML/CSS/JS → Bootstrap 5 → Deployed on shared hosting
Featured Project
Custom MERN CMS
A full-stack content management system built for editorial workflows.
A comprehensive Content Management System built on the MERN stack, designed to streamline digital content creation, editing, and publishing workflows for small-to-medium teams.
MongoDB
Express.js
React
Node.js
Case Study — Custom MERN CMS
The Problem
Off-the-shelf CMS platforms like WordPress are often bloated with unnecessary features, slow to customise, and difficult for developers to extend cleanly. Teams needed a lightweight, developer-first CMS tailored to their exact workflow.
The Solution
Built a custom CMS from scratch on the MERN stack, providing a clean REST API backend with a React-powered admin dashboard. Authentication, role management, and content versioning are all handled within the system.
Key Features
- ▹JWT-based authentication with role-based access (Editor, Reviewer, Admin)
- ▹Rich-text content editor with image upload support via cloud storage
- ▹Content versioning — draft, review, and publish workflow
- ▹RESTful API consumed by the React frontend with a clean separation of concerns
- ▹Dashboard analytics showing published posts, active users, and recent activity
Challenges & Lessons
Designing the content versioning system to handle concurrent edits without conflicts required careful state management and optimistic locking strategies. Keeping the React bundle size small while supporting a rich editor also required code-splitting.
Architecture
React (Vite) → Express.js API → MongoDB Atlas → JWT Auth → Vercel + Railway