Back to Projects
liveEST. 2023

ViewTube Client

A highly interactive, modern web application for consuming and sharing video content.

Technologies Used

Next.jsReactTailwind CSSRadix UIZodFramer Motion

Project Overview

ViewTube Client serves as the primary user-facing frontend for the ViewTube platform. It delivers an intuitive, highly responsive user experience simulating popular video-sharing architectures. Featuring seamless video playback, real-time feedback mechanisms, interactive creator dashboards, and a sleek dark-mode aligned UI, the application efficiently interfaces with the custom ViewTube REST API.

Key Features

01

Server-side rendered application structure leveraging Next.js App Router for optimal SEO.

02

Accessible, highly-customized component library synthesized from Radix UI and Tailwind.

03

Dynamic client-side form validations employing React Hook Form and Zod.

04

Fluid UI animations and micro-interactions orchestrated via Framer Motion.

05

Interactive data visualization dashboard for creators utilizing Recharts.

High-Level Architecture

Engineered as a modern monolithic web application heavily leveraging the Next.js App Router for optimal server-side rendering, caching, and customized routing. The presentation layer utilizes a robust Tailwind CSS design system coupled with unstyled Radix UI primitives for maximum accessibility. Complex state mutations and asynchronous API communications are handled effectively via modular React hooks interacting with the external Express backend.

Challenges & Learnings

Managing complex, cascading asynchronous state updates across deeply nested architectural components—such as dynamic video player contextual states and real-time comment feed pagination—while preserving a flawless 60fps interaction experience globally using Framer Motion.

Interface Gallery

ViewTube Client screenshot 1
Enlarge
ViewTube Client screenshot 2
Enlarge