Skip to content
pv

Software developerCalgary, Alberta

All projects

Frontend

Family Streaming Interface

A React prototype for family viewing, with separate parent and child interfaces, personalized browsing, and settings saved per profile in the browser.

  • React
  • JavaScript
  • MUI
  • React Router
  • localStorage
  • UI Prototyping

Browsing and supervision by profile

I built separate browsing and supervision interfaces around a shared set of child profiles.

The prototype connects catalog search, show details, player controls, and parent settings. Favorites and restrictions persist per child in the browser; account operations are simulated.

Browsing, profiles, and parent controls

BrowseProfileRestrictions
Linked interface areas in the family viewing prototype. Profile settings persist locally in the browser.

Keeping settings separate for each child

Favorites, restricted titles, limits, and locks are saved under profile-specific browser-storage keys. That separation lets children keep different settings in the same browser. Storage helpers prevent duplicate favorites and restrictions; parent details and image previews are saved separately for the browser as a whole.

The prototype has no backend account service. Account-management dialogs validate input and display simulated confirmations, while restriction checks cover selected entry points. Complete route enforcement would need additional work.

Keyboard navigation and playback controls

Discovery and player screens track a focus position for arrow-key navigation and activation. Custom controls connect to the browser video element for playback, seeking, volume, and fullscreen. Seeking waits for a finite video duration before converting a percentage into a playback position.

Time-limit settings convert hours and minutes into stored values. Usage and viewing history are example data rather than measured watch time, and the referenced sample video is absent from the supplied project. The implemented work is the interface, navigation, and local personalization workflow.

Tools and technologies

  • JavaScript / JSX
  • React
  • React Router
  • MUI
  • CSS
  • localStorage
  • FileReader
  • HTML video

React Router manages nested layouts and navigation context; MUI provides interface primitives. localStorage persists settings, FileReader supports image previews, and browser media APIs connect the player controls.