Investigations

VideoVox Frontend

TypeScript October 2025

A Next.js 16 proof-of-concept frontend for video translation with Atomic Design, Storybook 9, and comprehensive testing.

VideoVoxPoc is the frontend application for the VideoVox video translation system. It's built as a showcase of professional frontend engineering practices rather than just features.

The component architecture follows Atomic Design: atoms (buttons, inputs), molecules (form groups, cards), organisms (navigation, forms), and templates (page layouts). Every component lives in Storybook 9 for isolated development and visual testing.

Testing is thorough: Jest with React Testing Library for unit tests (70% minimum coverage thresholds), Playwright for E2E tests, and Husky git hooks enforcing format, type, lint, and test checks on every commit. A quality gate script runs 6 checks before code can be pushed.

The stack is Next.js 16 App Router, TypeScript, Tailwind, and shadcn/ui. It connects to the VideoVox GraphQL backend for actual video processing.

What this project demonstrates

Atomic Design: atoms, molecules, organisms, templates
Storybook 9 for component development
70% minimum test coverage with Jest + Playwright E2E
Husky pre-commit and pre-push quality gates
Next.js 16 App Router with TypeScript
Connects to VideoVox GraphQL backend

Technologies

Next.jsAtomic DesignStorybookTestingPlaywright

© 2026 Jonathan Leahy · v1.0.9