Back to Projects

Horizon
Shorts

Horizon Shorts is a super-engagement platform for short-form video. It lets brands and publishers manage, distribute, and measure short-form content in their websites and apps via configurable entry points, a video library, campaigns, and UGC (polls, comments, reports).

Visit Site
Horizon Shorts preview

Project Overview

Horizon Shorts is the admin and management frontend for the Horizon short-form video product. It provides a single dashboard for content (Library, Uploads, Channels), distribution (Entry Points), campaigns and ads, UGC (Polls, Comments, Reports), and experience customization (Theme, Shorts Player, Settings). It works with a GraphQL backend and supports multi-tenant workspaces and role-based access (System Admin, Tenant Admin, Publisher, Moderator).

The platform is built for placing short-form video experiences anywhere—websites, mobile apps, and platforms like Shopify—via embeddable entry points. Publishers configure entry point type (e.g. RECTANGLE, CIRCLE, BLOCK), size (COMPACT, STANDARD, BOLD, BLOCK_OF_2/4), content and recommendation rules, then use the Launch flow to get platform-specific embed code (e.g. Web, Shopify, Mobile) for play.horizonexp.com or a custom embed URL.

Design & Frontend Approach

The app is a Next.js 15 (App Router) SPA with React 19, Tailwind CSS, Radix UI primitives, and Motion for animations. It uses a structured design system (semantic colors, spacing, typography, and animation tokens) and keeps route-specific UI in each route's components/ folder while sharing layout and primitives from src/components/.

  • Fully responsive UI — Breakpoints from xs (475px) through 4xl (2560px), with 3xl (1600px) used for side nav and key layouts; mobile-first and fluid typography/spacing.

  • Consistent, component-driven frontend — Radix UI (dialogs, tabs, dropdowns, accordions, etc.), shared src/components/ui/ primitives, and shorts-ui feature components (e.g. VideoPreview, DesignerComponents, polls, ads) for a consistent, maintainable UI.

  • Scalable design system — Tailwind theme with primary/secondary/muted/success/warning/error palettes, custom keyframes and animations (shimmer, fade, slide, scale, bounce), focus rings, and scrollbar utilities; design tokens support theming and future white-label use.

Design & Frontend Approach showcase 1
Design & Frontend Approach showcase 2
Design & Frontend Approach showcase 3
Design & Frontend Approach showcase 4
Design & Frontend Approach showcase 5
Design & Frontend Approach showcase 6
Design & Frontend Approach showcase 7
01/07

Architecture-Level Description

Horizon Shorts is organized as a feature-domain Next.js App Router application where each major area—Library, Entry Points, Campaigns, UGC, and Experience—owns its route tree and co-located components. Shared shells, navigation, and UI primitives live in src/components/, while feature-specific logic stays close to the routes that use it.

The frontend communicates with a GraphQL backend that powers multi-tenant workspaces, role-based access (System Admin, Tenant Admin, Publisher, Moderator), and embeddable distribution flows. Publishers configure entry points, content rules, and launch settings in the dashboard, then generate platform-specific embed code for web, Shopify, and mobile surfaces.

This separation keeps the admin experience scalable: shared design tokens and Radix-based primitives ensure visual consistency, while domain modules can evolve independently as new short-form video capabilities are added.