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).
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.
