June 2025
Nobarin Movie Streaming Platform
Modern movie browsing platform with real-time data integration and responsive design.
Vue.jsPiniaTailwindCSSTMDB APIVite
Overview
Project Strategy
Nobarin is a modern movie discovery and streaming study case project designed to reimagine how audiences explore cinema in the digital age. With content scattered across multiple platforms, users often struggle to find what to watch next. Nobarin addresses this challenge by offering a centralized, intuitive interface powered by real‑time data from the TMDB API, giving instant access to trending titles, detailed synopses, cast information, and personalized recommendations.
Built with performance and user experience at its core, the platform leverages Vue.js and Pinia to deliver lightning‑fast state management and seamless page transitions. Users can personalize their journey by curating a favorites list, filtering by genre, and accessing rich metadata without interruptions.
More than just a catalog, Nobarin emphasizes engagement and accessibility. Its responsive design ensures a premium experience across devices, combining clean aesthetics with robust functionality. As a study case, Nobarin demonstrates how thoughtful design and modern engineering can create a companion platform for movie enthusiasts, bridging discovery with delight.
Role
Fullstack Developer handling frontend design, API integration, and routing logic.
Timeline
June 2025
Tools
Vue.js, Pinia, TailwindCSS, TMDB API
Key Responsibilities
- Designed and implemented the frontend architecture using Vue.js and Pinia for fast state management.
- Developed the backend integration with TMDB API to deliver real‑time movie data.
- Built core features including favorites list, genre filtering, and metadata access.
- Ensured responsive design and seamless user experience across desktop and mobile devices.
Impact & Results
- Demonstrated the ability to create a scalable streaming platform concept with modern technologies.
- Achieved instant data retrieval from TMDB API, reducing content discovery time significantly.
- Improved user engagement through personalized recommendations and favorites management.
- Improved user engagement through personalized recommendations and favorites management.
- Strengthened portfolio credibility by showcasing end‑to‑end development skills in a real‑world study case.
Challenges
The Challenge
Building Nobarin as a study case project required overcoming several hurdles, from integrating real‑time data through the TMDB API while maintaining speed and accuracy, to managing complex state across features like favorites and personalized recommendations with Pinia. Ensuring seamless performance without loading delays demanded optimization of API calls and caching, while responsive design testing across devices highlighted the need for accessibility and clarity. Balancing robust functionality with simplicity became the central challenge, shaping Nobarin into a platform that feels both engaging and intuitive.
Problem
Movie enthusiasts often struggled to find relevant titles because information was scattered across multiple sites, forcing them to open several different pages just to see a synopsis, ratings, or recommendations. Many catalog UIs felt cluttered and confusing, with no clear hierarchy to distinguish popular titles, new releases, or personal favorites. Browsing was slowed down by dynamic data fetching and suboptimal state management, making the experience feel heavy and unresponsive. Users also lacked a centralized favorites system, so discovery rarely turned into re‑engagement.
Scattered movie data
Users had to open several different websites just to see a synopsis, ratings, and recommendations for a single movie.
Confusing catalog UI
Without a clear card structure, it was hard to distinguish popular titles, new releases, and personal favorites at a glance.
Slow browsing experience
Dynamic data fetching and suboptimal state management made the browsing experience feel slow and unresponsive.
No central favorites
Users lacked a single place to store and revisit movies they were interested in, so discovery rarely turned into re-engagement.
Solution
Nobarin solves these problems by providing a centralized movie discovery platform powered by the TMDB API, delivering real‑time data with Vue.js and Pinia for fast state management. Features like favorites, genre filters, and responsive design ensure users can explore and personalize their experience seamlessly, while performance optimizations keep navigation smooth and engaging across all devices.
TMDB API integration
Fetched live movie data from TMDB and mapped it into modular Vue components for listings and detail pages.
Centralized state with Pinia
Centralized movie data and favorites management in a single Pinia store so navigation between pages feels instant.
Responsive card design
Redesigned movie cards with a clear visual hierarchy: poster, title, rating, and primary action, optimized for both mobile and desktop.
Structured routing
Used dynamic routing for detail pages and categories, making it straightforward to add new discovery sections in the future.
Process
The Phase of thise project
Requirement Gathering & Planning
The scope of the study case was defined to focus on movie search, favorites management, and detailed metadata access. Benchmarking against existing streaming catalogs helped identify gaps in navigation and personalization, while the technical stack Vue.js, Pinia, TailwindCSS, TMDB API, and Vite was outlined to ensure scalability and performance.
UI Design & Component Setup
Moving into UI Design & Component Setup, the interface was crafted with TailwindCSS to deliver clarity and accessibility. Reusable Vue components such as the navigation bar, movie cards, filters, and detail modals were built to ensure modularity, while a consistent design system was established with clear typography, spacing, and color hierarchy to achieve a premium aesthetic.
State Management & Routing
The next phase focused on State Management & Routing, where Vue Router was implemented to provide structured navigation between home, category, and detail pages. Pinia centralized movie data and favorites handling, reducing redundancy and improving performance. Store modules were carefully designed to manage API responses, caching, and user interactions seamlessly.
API Integration
With the foundation in place, API Integration became the critical step. Real‑time movie data from the TMDB API was connected and mapped into modular components, ensuring scalability for future features. Error handling and fallback states were applied to maintain reliability even under API rate limits, guaranteeing a smooth user experience.
Testing & Deployment
The project then advanced to Testing & Optimization, where iterative validation across desktop and mobile devices ensured responsiveness and accessibility. Routing bugs were fixed, API calls were optimized with caching strategies, and performance audits using Lighthouse and browser developer tools refined transitions to achieve high responsiveness.