NovaClip - Short-Form Video App

NovaClip is a complete short-form video platform template built with Ionic React and TypeScript. It replicates the core experience of a modern creator-driven video app - vertical scroll-snap feed, creator profiles, content discovery, DMs, notifications, and analytics - with a polished dark UI and a consistent purple/pink design system throughout.

This is a frontend-only template. All data is driven by well-structured mock files that mirror a real API contract, making it straightforward to wire up a backend. The component architecture is clean and separated, and every screen is functional and navigable out of the box.

It is aimed at developers who want a serious head start building a short-form video product, social media clone, or creator platform - without spending weeks on UI scaffolding.

Key Features

• Vertical scroll-snap video feed with auto-play, tap-to-pause, and mute toggle; supports "For You" and "Following" feed sources with simulated infinite scroll
• Full engagement layer - like, comment, save, and share actions on every video, with counts and toggle states wired to component state
• Creator analytics dashboard - 7-day and 28-day views, per-metric performance cards with trend percentages, daily sparkline, and top clips section
• Content creation flow - camera recorder mockup (15s/30s/60s/3m), upload page with caption, hashtags, privacy controls, allow-comments and allow-duets toggles
• Discovery & search - debounced search across creators and clips, 12 trending topic cards with custom per-topic gradients, trending creators carousel, clip grid
• Messaging inbox - conversation list with online indicators, unread badges, and a full thread view
• Notifications centre - 8 notification types (like, comment, follow, mention, reply, share, save, collab) with type-specific colour-coded badges and filter tabs
• Saved collections - public/private collection management with clip grid and cover images
• Settings page - account section, preferences toggles (notifications, autoplay, data saver), support links, sign-out with confirmation dialog
• Onboarding screen - welcome/sign-in/sign-up flow with localStorage persistence so reload always returns to the correct state
• Glassmorphism design system - dark-mode-only with CSS custom properties, reusable button variants, overlay gradients, and glow shadow utilities

Included Screens

• Welcome / Onboarding (sign up, sign in, guest entry)
• Home Feed (For You + Following, scroll-snap, comment sheet modal)
• Discover (search, trending topics, creators, clips)
• Topic / Hashtag page
• Create (recorder mockup)
• Upload & Post (caption, tags, privacy, duet settings)
• Profile - own user (clips, liked, saved tabs; links to analytics and settings)
• Creator Profile - other users (follow/unfollow, message, clips, liked tabs)
• Comments - full page and sheet modal variants
• Notifications (All / Mentions / Follows filter tabs)
• Inbox (conversation list)
• Message Thread
• Saved (All Clips + Collections tabs)
• Analytics (7d/28d toggle, metrics cards, daily chart, top clips)
• Settings

Technology Stack

• Framework: Ionic React 8 with Ionic React Router
• Language: TypeScript (strict mode)
• UI components: Ionic UI components throughout (IonPage, IonContent, IonModal, IonSegment, IonTabs, etc.)
• Routing: React Router 5 via @ionic/react-router, tab-based shell with nested routes
• Styling: Component-scoped CSS files + global CSS custom properties in src/theme/variables.css; no CSS-in-JS dependency
• Build tool: Vite
• Icons: Ionicons 7
• State: React useState / useCallback / useRef; no external state library
• Data: Typed mock data in src/data/; all models defined in src/types/index.ts
• No backend required to run; structured for straightforward API integration

Best For

• Developers building a short-form video platform, creator marketplace, or social video app
• Teams wanting a complete Ionic React UI reference with real navigation patterns and a consistent design system
• Startups prototyping a TikTok/Reels-style product who need a navigable demo quickly
• Agencies delivering social or creator-economy mobile apps to clients

Notes

• All video playback uses real MP4 files served from public/videos/; by default these are royalty-free test clips - substitute your own content for production
• No authentication, backend API, or real video upload is implemented; the template is frontend-only
• The camera/recorder screen is a UI mockup only - device camera access is not wired up
• The app is dark-mode only; there is no light theme variant