Back to portfolio
CineShelf — Social Movie, TV & Game Library logoMedia library & social sharing

CineShelf — Social Movie, TV & Game Library

A trilingual (English · Français · العربية) Flutter app for tracking movies, TV series, and games: private libraries with personal ratings and reviews, TMDB and IGDB discovery through an authenticated Cloudflare Worker, and a privacy-controlled social layer with friends and shared sections — on phone, tablet, and web.

FlutterDartBLoCFirebaseCloudflare WorkersAndroidiOSWeb

CineShelf is a production-architecture Flutter app for people who want one shelf for everything they watch and play. A persisted content mode flips the whole app between Movies & TV and Games while keeping the same four destinations — Discover, My library, My movies, and Profile — so the navigation never shifts under the user.

Discovery is powered by TMDB for movies and TV series and by IGDB for games, both reached through an authenticated Cloudflare Worker proxy so no API credentials ever ship inside the app. Every title can be filed as favorite, watch later, watched, owned, or wishlisted, rated with half-stars, reviewed with a private comment, and tagged with the streaming service it lives on.

The social layer is opt-in by design: personal libraries stay private until the user publishes a section. Unique usernames, a discoverable-profile switch, friend requests, blocking, content reporting, in-app notifications, and per-section visibility (only me, friends only, custom, everyone) decide exactly who sees which shelf.

The app is built feature-first with Clean Architecture and flutter_bloc, ships Material 3 light and dark themes, supports full RTL for Arabic, and runs responsively on Android, iOS, and the web. A compile-time showcase adapter feeds deterministic data to a Playwright capture pipeline that produces the store screenshots and mockups shown here.

Presentation

Mockups

CineShelf on the web — desktop discovery grid and the movie library in browser windows
CineShelf on the web in dark mode — IGDB game discovery and the game library
CineShelf on phones — discovery, movie library, custom titles, and TV series
CineShelf on phones in dark mode — social profile, friends, privacy settings, and requests
CineShelf on tablets — 13-inch iPad TV discovery beside a 10-inch Android library
CineShelf on tablets in dark mode — game discovery, game library, and custom titles
CineShelf games mode — IGDB discovery and the game library on desktop, iPad, and phone
CineShelf in Arabic and French — right-to-left layout on web and phone beside the French iPad build
Details

App presentation

CineShelf App

Movie, TV, and game discovery with private libraries, half-star ratings and reviews, custom titles, and a privacy-controlled friends layer — trilingual, light & dark, phone to web.

CineShelf is a Flutter app for tracking movies, TV series, and games in one place. It is organized feature-first with Clean Architecture (data / domain / presentation) and flutter_bloc, with go_router handling navigation and a single composition root for dependency injection. A persisted content mode switches the whole shell between Movies & TV and Games without changing the four primary destinations. Movie and TV discovery comes from TMDB with popular, latest, highest-rated, and upcoming feeds, media-type filtering, paginated results, and debounced search; game discovery comes from IGDB through an authenticated Cloudflare Worker proxy with minimum-rating, platform, and sort filters, so IGDB and TMDB credentials never ship in the client. Detail pages carry overviews, genres, runtime, screenshots, developers, publishers, game modes, similar titles, a full-screen poster and backdrop gallery, native gallery saving with explicit permission handling, and share actions. The library keeps favorites, watch later, watched, owned, wishlist, and played shelves in Firestore, each with half-star personal ratings, a recommendation level, a private comment, and a watched or played date, plus year filters, sorting, and in-library search. Users can also author fully editable custom movies with a validated HTTPS poster URL for titles TMDB does not have. The social feature adds unique usernames with live availability checking, people search, friend requests, blocking, content reporting, in-app notifications, and per-section privacy so shared movie and game sections are visible only to the audience the owner picks. Settings cover system / light / dark themes, English, French, and Arabic with RTL, data export, and account deletion; Firestore rules and indexes plus a public privacy and account-deletion site complete the store-release setup.

  • One app for movies, TV series, and games — a persisted content mode swaps the catalog while the four primary destinations stay put.
  • TMDB and IGDB data served through an authenticated Cloudflare Worker proxy: no API keys or secrets ship inside the app.
  • Private shelves — favorites, watch later, watched, owned, wishlist, played — with half-star ratings, recommendation levels, and private comments.
  • Opt-in social layer: unique usernames, friend requests, blocking, reporting, notifications, and per-section visibility from only-me to everyone.
  • Editable custom movies with validated HTTPS poster URLs for titles that TMDB does not carry.
  • Trilingual English / French / Arabic with full RTL, Material 3 light and dark themes, and responsive phone, tablet, and web layouts.
  • Feature-first Clean Architecture with flutter_bloc, Firebase Auth and Firestore, Firestore rules and indexes, and a tested Cloudflare Worker backend.
  • Compile-time showcase adapter feeds deterministic data to a Playwright pipeline that generates the store screenshots and mockups on this page.

Discovery & Search

  • TMDB discovery feeds for popular, latest, highest-rated, and upcoming titles with an all / movies / TV series media filter.
  • Debounced search across TMDB with pagination, page-size control, and a fallback into the user's own custom movies.
  • IGDB game discovery with minimum-rating, platform, and name or rating sorting through the Worker proxy.
  • Detail pages with overview, genres, runtime, screenshots, developers, publishers, game modes, and similar titles.
  • Full-screen poster and backdrop gallery with native gallery saving, permission handling, and browser download on web.

Personal Library

  • Movie shelves for favorites, watch later, watched, and owned; game shelves for favorites, wishlist, played, and owned.
  • Half-star personal ratings with a recommendation level — highly recommend, recommend, neutral, or not recommended — and a private comment.
  • Watched and played entries record their date, and reviews stay editable after the fact.
  • Streaming tags for Netflix and Prime Video with a 'find where to watch' provider search shortcut.
  • Library search, release-year filters, and sorting by date added, release date, or title.

Custom Movies

  • Full CRUD for user-owned titles that TMDB does not carry, stored per account in Firestore.
  • Validated HTTPS poster URL with live preview and a graceful placeholder when the image fails.
  • Release year, runtime, multi-select genres, and notes captured through guided pickers.
  • Custom titles surface inside search and the library alongside TMDB results.

Social & Privacy

  • Unique usernames with live availability checking and a discoverable-profile switch that controls people search.
  • Friend requests with incoming and sent queues, accept, decline, cancel, and remove, plus in-app notifications.
  • Per-section visibility — only me, friends only, custom, or everyone — decides which shelves a viewer can open.
  • Shared movie and game sections expose friends' ratings and reviews without ever exposing the private library.
  • Blocking plus content reporting for users and reviews with spam, harassment, hate speech, sexual content, violence, and impersonation reasons.

Architecture & Delivery

  • Feature-first Clean Architecture: presentation → domain ← data, with BLoC/Cubit state and constructor-injected use cases.
  • Firebase Authentication with Google and email/password, Firestore as the source of truth, and versioned security rules and indexes.
  • Cloudflare Worker proxy in TypeScript with its own typecheck and test suite, keeping TMDB and IGDB credentials server-side.
  • Settings for system / light / dark theme, EN / FR / AR with RTL, data export, and full account deletion.
  • Store-release toolkit: a compile-time showcase adapter plus Playwright capture generating Play Store, App Store, and web assets in every locale.