Project 04 / 2025

MovieOn

Fullstack Developer/ Next.js/ Supabase/ TypeScript/ Tailwind CSS/ Design System

Year

2025

Role

Fullstack Developer

Technologies

Next.js, Supabase, TypeScript, Tailwind CSS, Design System

About this project

MovieOn is a modern movie web interface focused on theming, accessibility, and clean frontend architecture. It uses Next.js App Router, TypeScript, Tailwind CSS v4, optimized fonts, and a Supabase-ready dependency stack.

Overview

MovieOn explores a cinematic browsing experience with a strong foundation for theme switching, reusable tokens, optimized typography, and future content integration. The README emphasizes design-system quality as much as page implementation.

My Role

Built the frontend architecture, theme provider, Tailwind token system, font setup, and reusable UI direction. The project was structured to make visual iteration fast without scattering colors or typography across components.

Key Features

05 Items

Feature

Semantic Color Tokens

Background, foreground, primary, muted, card, border, and focus-ring variants are centralized in Tailwind CSS v4 theme definitions.

Feature

Optimized Typography

Next.js font optimization wires Oswald, Source Sans 3, and Montserrat Alternates into CSS variables.

Feature

Modern App Router

Next.js App Router structure keeps root layout, page composition, theme providers, and global styles predictable.

Feature

Accessible Primitives

Radix UI primitives support dialogs, dropdowns, avatars, labels, popovers, and slots for accessible interaction patterns.

Feature

Supabase-Ready Stack

Supabase client dependency is included for database-backed movie content, auth, or serverless data features.

Tech Stack

Framework

Next.js 15React 19TypeScriptApp Router

Styling

Tailwind CSS v4CSS Variablesnext-themestw-animate-css

UI and Data

Radix UIlucide-reactSonnerSupabaseEmbla Carousel

The Challenge

Movie interfaces can quickly become visually inconsistent when theme colors, display fonts, and interactive states are handled component by component. The project needed a clean base for cinematic UI without sacrificing accessibility or developer experience.

The Solution

Built the UI around semantic theme tokens, class-based dark mode, optimized font variables, and reusable primitives. This keeps the visual language centralized while allowing pages and components to remain simple.

Lessons Learned

Theme systems should start with semantic intent, not raw color names.

Font roles are easier to maintain when headings, body, and accents map to explicit CSS variables.

Small UI projects still benefit from production-grade structure when they are meant to grow.

Screenshots

Swipe or use the arrows.