INTERACTIVE FILM & MUSIC DISCOVERY PLATFORM

CineVerse Observatory

CineVerse Observatory is a web platform for film and music enthusiasts that turns selected titles and guided answers into a cinematic taste profile and personalized recommendations. It combines an interactive universe map, a personal library, Orbitune song discovery, and shareable Tasteprint exports in one connected experience.

My roleProduct Designer & Full-Stack Developer

Product StrategyUI/UX DesignReact & TypeScriptNestJS APIPrisma & PostgreSQLAuth & SecurityExternal APIsAutomated Testing

StatusCompleted

Year2026

Open Private Demo View Technical Showcase

Private interactive demo. Access credentials are shared directly with recruiters and reviewers.

Product walkthrough

Watch a taste profile become a personal media universe.

A complete walkthrough of onboarding, taste selection, cinematic DNA, personalized discovery, the Universe Map, Orbitune, and the persistent media library.

Full product walkthrough1080p · Play on demand

Problem

Turning fragmented film, music, and saved-list behavior into one understandable taste profile.

Film and music enthusiasts need to discover content that fits their current mood, understand the patterns behind their choices, and organize what they have watched, saved, rated, or listened to. When these activities are split across search tools, watchlists, ratings, and playlists, recommendations lose context and saved content becomes an archive that does not explain how each item relates to the user’s taste. CineVerse addresses this fragmentation by bringing analysis, discovery, organization, and visual representation into one connected journey.

Solution

A guided scan that grows into an explorable, organized, and exportable taste universe.

CineVerse turns a guided taste scan into a secure, persistent discovery system where analysis, recommendations, film and music exploration, and saved collections reinforce one another.

Product scope

How the solution is organized.

Taste Scan & DNA

Selected films and five guided questions produce a six-dimension cinematic profile that gives later recommendations visible context.

Discovery & Universe Map

Film recommendations, genre planets, selected titles, Orbitune signals, and song meteors are explored through one connected visual model.

Library & Tasteprint

Ratings, favorites, watchlists, playlists, collections, and mixed-media constellations reuse saved content instead of ending each interaction at a single screen.

Secure Persistent State

Authenticated server state, revision control, HttpOnly cookies, and backend API proxies protect user data and external-service credentials across sessions.

Design decisions

Three product choices that connected analysis, discovery, and organization into one experience.

Build the taste profile before presenting recommendations: Instead of opening with generic suggestions, CineVerse asks users to select at least three films and complete five short questions. These inputs become a six-dimension DNA profile, reducing the cold-start problem and giving users a visible foundation for understanding later recommendations.

Connect films and music through one visual model: The Universe Map brings genre planets, selected films, suggested films, song meteors, and Orbitune signals into the same scene. Users can control labels and suggestions, edit the map’s content, move directly into connected tools, and export the universe as an image, making cross-media relationships explorable rather than list-based.

Reuse saved content throughout the product: A film’s journey does not end when it is rated or saved, and a song’s journey does not end when it is captured in Orbitune. Films feed favorites, watchlists, and collections, while songs feed the map, playlists, mixed-media constellations, and Tasteprint. This reduces repeated selection and turns the library into an active workspace with media filters and card or row views.

Technical architecture

The implementation behind the interface.

React + TypeScriptVite interactive client

Central API ClientNo direct service calls or browser persistence

NestJS APIAuth, validation, proxies, and state services

Prisma ORMAtomic relational operations

PostgreSQL 16Persistent user and product state

Connected services & concerns

OMDbiTunesLast.fm

Evidence

What is implemented, constrained, and verified.

Engineering evidence

Secure HttpOnly access and rotating refresh cookies replace browser token storage.
Atomic revision control rejects stale sessions before they overwrite newer PostgreSQL state.
OMDb, iTunes, and Last.fm requests pass through validated backend proxies with no exposed client keys.
A server-validated access key protects the private interactive demo and can be rotated through deployment configuration.

Constraints & trade-offs

The demo is intentionally access-protected; credentials are shared directly with authorized reviewers.
External discovery features depend on third-party service availability and rate limits.
Desktop behavior had to remain stable while mobile layouts and map interactions were refined independently.

Validation

Full-stack CI covers locked builds, Prisma generation and migrations, backend tests, API smoke tests, and protected-route behavior.
Playwright verifies account creation, persistence, logout/login restoration, dynamic routes, and responsive mobile layouts.
Security audits reject exposed API keys, direct external calls, browser persistence, and unsafe state mutations.

Gallery

From Taste Scan to the CineVerse Universe

The gallery follows the core experience from film selection and the guided taste scan to the DNA dashboard, film discovery, the Universe Map and song meteors, Orbitune, the personal library, and the final Tasteprint templates. Together, the screens show how simple user choices grow into a visual universe that can be organized, personalized, and exported.

Outcome

A connected product that turns user choices into an explorable, organized, and shareable taste profile.

The result is a complete functional journey that begins with onboarding and account creation, moves through taste analysis and recommendations, and continues into film search, detailed views, visual mapping, music discovery, library management, and export. Films, songs, ratings, collections, and playlists operate as connected parts of one server-backed state rather than isolated features. The interface supports English and Arabic with LTR and RTL layouts, includes loading, error, and empty states, and adapts its main flows across desktop and mobile. The repository includes frontend, state, backend, database, API, and browser-route testing, along with a Render configuration for the web application, API, and PostgreSQL database. This supports a ready-to-run status without claiming unverified usage or commercial results. The project demonstrates the ability to combine personalized product design, explainable recommendation logic, interactive visual presentation, and full-stack persistence within one cohesive application.

Product Design & UXInformation Architecture & Interaction DesignReact & TypeScriptNestJS, Prisma & PostgreSQLState Management & Server SynchronizationFull-stack developmentArabic–English Localization & RTL/LTR

Next project

Community Service

Community Service is an end-to-end platform that coordinates beneficiary transportation between charitable associations, the General Syndicate of Cars, and transportation companies. Associations manage beneficiary records and submit trip requests, the syndicate reviews and assigns approved requests, and transport companies allocate vehicles and drivers while tracking execution. The platform brings the full operational journey into one role-based system.