Bro. Nungu

06 · Movie & series marketplace

Treasures Movie Bank

In production

Preview, buy and download movies and series.

Category
Movie & series marketplace
Role
Product design & full-stack engineering
Built by
Empire Pro Dev
Treasures Movie Bank home page on desktop in the dark theme: the featured banner for The Fantastic 4: First Steps with Watch Preview and Buy & Download · TSh 5,000 buttons, slide controls, and cards for discovering movies, watching previews and purchasing downloads.
Treasures Movie Bank home page on a phone in the dark theme: the featured banner for The Fantastic 4: First Steps with Watch Preview and Buy & Download buttons, three feature cards, the start of Trending Now, and the bottom navigation bar.

Screens

Treasures Movie Bank interface

  • Treasures Movie Bank home page on desktop in the dark theme: the featured banner for The Fantastic 4: First Steps with Watch Preview and Buy & Download · TSh 5,000 buttons, slide controls, and cards for discovering movies, watching previews and purchasing downloads.
  • Treasures Movie Bank home page on a phone in the dark theme: the featured banner for The Fantastic 4: First Steps with Watch Preview and Buy & Download buttons, three feature cards, the start of Trending Now, and the bottom navigation bar.
  • Treasures Movie Bank home page on a tablet in the dark theme: the featured banner for The Fantastic 4: First Steps, feature cards for discovering, previewing and purchasing, the Trending Now row, and the bottom navigation bar.
  • Treasures Movie Bank Trending Now and Popular rows on desktop in the dark theme: poster cards with quality and new-release badges, year, genre, running time or season count, audio and subtitle languages, and prices in Tanzanian shillings.
  • Treasures Movie Bank search palette on desktop in the dark theme, with “lion” typed and poster results including Lion of the Desert, The Lion King, Mufasa: The Lion King and The Chronicles of Narnia.
  • Treasures Movie Bank movie catalogue on desktop in the dark theme with the filters panel open: genres, audio language, subtitles, a dubbed-only switch, release year range, minimum quality, age rating and price.
  • Treasures Movie Bank title page on desktop in the dark theme for Dune: Part Two: poster, tagline, year, genre, running time, quality and age-rating badges, subtitle languages, synopsis, preview and purchase buttons marked coming soon, and a details panel with release date, quality, resolution and file size.
  • Treasures Movie Bank seasons and episodes for Game of Thrones on desktop in the dark theme: season tabs, episode cards with stills, running time, file size, air date, quality and language badges, and a details panel with prices from TSh 1,500.
  • Treasures Movie Bank series page on a phone in the dark theme for Game of Thrones: poster, tagline, two seasons and ten episodes, quality and age-rating badges, synopsis, a preview button, and the bottom navigation bar.
  • Treasures Movie Bank genres page on a tablet in the dark theme: a three-column grid of genre tiles with artwork and title counts, from Action and Adventure to Animation, Family and Biography.

Overview

A mobile-first marketplace for movies and series. Visitors browse a curated catalogue and watch free previews, then buy a title, a single episode or a whole season and download what they own through short-lived secure links. Staff manage the catalogue, uploads, orders and settings from an admin dashboard.

Product areas

  • Catalogue & search
  • Free previews
  • Purchases
  • Episodes & seasons
  • Secure downloads
  • Payments
  • Admin dashboard
  • Installable app

Technologies

  • Next.js
  • TypeScript
  • Tailwind CSS
  • Supabase
  • PostgreSQL
  • Cloudflare R2
  • React Query

Case study

From problem to product

The complete engineering lifecycle behind Treasures Movie Bank.

  1. 01

    Problem

    Selling films digitally means protecting the files: a buyer must be able to download what they paid for, and nobody else should be able to reuse their link.

    • Buyers need to download what they paid for, reliably
    • Download links must not work for anyone who did not pay
    • Distribution rights expire and have to be respected
  2. 02

    Idea

    Treasures Movie Bank: a catalogue with free previews, purchases down to a single episode, and downloads issued only after ownership is checked.

    • Free previews before buying
    • Buy a film, a single episode or a whole season
    • Short-lived, private download links
  3. 03

    Approach

    I started with the rules that protect the business, ownership, pricing and downloads, and put them in the database itself, so no screen or API can go around them.

    • Access rules enforced by the database, not only by the application
    • A built-in demo catalogue, so the interface can be explored before any backend exists
    • A payment interface that does not depend on any single provider
  4. 04

    Architecture

    Full films sit in a private storage bucket. Each download request is checked in the database for ownership, distribution rights, file readiness and download limits, and only then is a link issued that expires within hours and is never cached.

    • Storefront, sign-in, admin and API routes in one Next.js application
    • Server-only modules for auth, catalogue, commerce, payments and storage
    • Two buckets: a private one for films and a public one behind a CDN for artwork

    System architecture

    3 layers · 10 modules

    1. L01Experiences

      3 modules
      • Storefront
      • Account & library
      • Admin dashboard

    2. L02Services

      4 modules
      • Catalogue & search
      • Checkout & payments
      • Download authorisation
      • Uploads

    3. L03Data & storage

      3 modules
      • PostgreSQL · Supabase
      • Row-level security
      • Cloudflare R2
    Conceptual architecture: layers and their responsibilities.
  5. 05

    Design

    The storefront is mobile-first, with a gold-and-ink brand, square corners throughout, and light and dark themes.

    • Search from anywhere through a command palette
    • Curated collections and genres on the home page
    • Installable as an app, with its own icons and splash screens
  6. 06

    Development

    The app is TypeScript on Next.js, with Supabase for the database and sign-in, React Query on the client and Zod validating every input.

    • Admins upload large videos straight to storage in resumable parts, never through the app server
    • A sandbox payment provider for development and a Paystack adapter for mobile money, cards and bank
    • Clean download file names, and a log of every download attempt, granted or denied
  7. 07

    Data

    Prices are always computed in the database from the catalogue, and an order is marked paid only after a verified webhook from the payment provider, never because the browser says so.

    • Trending scores recomputed on a schedule from views, previews and sales
    • Unpaid orders expired automatically, so abandoned checkouts never block buying again
    • Keyset pagination for fast browsing of a large catalogue
  8. 08

    Testing

    Database tests run the real migrations on an in-process Postgres to cover access rules, pricing, payment idempotency, ownership and download limits, alongside unit tests for redirects, filters and webhook signatures.

    • Access rules and adult-content gating
    • Search and pagination
    • Pricing, payment idempotency, ownership, download limits and refunds
    • Open-redirect protection and webhook signatures for both payment providers
  9. 09

    Deployment

    The app deploys to any Node host, and a single check command runs type-checking, linting and every test before each deploy.

    • A Content Security Policy built from the configured database, storage and media hosts
    • Artwork cached at the edge under versioned file names
    • A service worker that never caches account, checkout, admin or API responses
  10. 10

    Result & current state

    The storefront, purchases, secure downloads and admin dashboard are built and tested. Before launch: a live payment test, legal review of the terms and privacy pages, and the first licensed titles.

    • Complete: catalogue, previews, purchases, secure downloads and admin
    • Next: live payments and launch content

What building it taught.

Challenges

  • Stopping one buyer's download link from working for anyone else
  • Uploading very large video files from a browser
  • Trusting payment callbacks

Solutions

  • Links issued only after a database ownership check, expiring within hours and never cached
  • Resumable multipart uploads straight to storage
  • Webhooks verified by signature, re-checked with the provider and matched against the order amount

Lessons

  • Put the rules that matter most where nobody can skip them: in the database
  • Test security rules against a real database engine, not mocks
  • Keep payments behind an interface, so the provider can change