OWolf

AboutBlogProjects
©2025 OWolf.com

Privacy

Contact

Web Development

Channel 60

October 1, 2024

O. Wolfson

Building a Platform for a Modern Content Agency

Project by: O. Wolfson
Role: Full-Stack Developer, Technical Director
Stack: Next.js 14 · Supabase · Tailwind CSS · MDX · Radix UI · Zod · Styled Components


Overview

Channel Sixty and Channel60.tv are sister platforms forming the digital backbone of Channel 60, a creative studio and streaming content agency focused on short-form storytelling for commercial, entertainment, and socially relevant work.

This dual-site system serves two purposes:

  • Channel Sixty acts as the agency site, showcasing our creative capabilities, service offerings, and team.
  • Channel60.tv is a curated streaming portal for micro-content—built to house high-impact, low-duration content in a modern, responsive interface.

As the technical architect and developer, I implemented a system that balances customization, performance, and editorial flexibility, all built from the ground up using modern tools.


Project Goals

  • ✅ Launch two visually unified but functionally distinct web platforms
  • ✅ Showcase the agency’s capabilities (via ChannelSixty.com)
  • ✅ Deliver a snappy streaming experience for curated videos (via Channel60.tv)
  • ✅ Enable future expansion: subscriptions, gated content, or user submissions
  • ✅ Keep everything maintainable by a small creative team

Technical Architecture

🧱 Core Stack

  • Next.js 14 App Router for full control over routing, layout, and build optimizations
  • MDX + gray-matter for managing long-form content, landing pages, and team bios
  • Tailwind CSS, with tailwind-merge and tailwindcss-animate for utility-first styling and performant transitions
  • Styled Components for occasional component-scoped styling needs
  • Supabase provides authentication, backend API, and optional storage logic
  • Radix UI components + clsx + class-variance-authority for composable, accessible UI primitives

📽️ Video Platform Features

  • Channel60.tv is architected for streaming lightweight, short-form content
  • Uses lazy-loaded video components, optimized for mobile performance
  • Built-in video metadata (duration, genre, tags) enables future filtering or search
  • Designed with the TikTok/Shorts generation in mind—content is concise, loopable, and consumable in bursts

💼 Agency Site Highlights

  • Modular landing page sections with MDX-backed structure for easy updates
  • Team pages and project showcases powered by static content + Supabase metadata
  • Contact and inquiry forms use react-hook-form + zod with email delivery via Supabase functions or external mail providers

Developer Notes

json
"scripts": {
  "dev": "next dev",
  "build": "node lib/cachePosts.mjs && next build",
  "postbuild": "next-sitemap"
}

Both platforms share a common base but maintain independent builds. A shared caching script (lib/cachePosts.mjs) processes content before production build. This separation of static and dynamic concerns keeps each site lean and focused.

Common libraries across both:

  • @supabase/supabase-js for future client-only access
  • react-syntax-highlighter and rehype-highlight for developer showcase or documentation rendering
  • short-uuid and uuid for client-safe ID generation across services
  • next-themes for light/dark mode transitions

Real-World Applications

  • 🎬 Commercial Clients: We deliver fast-turnaround branded content and use the platform to archive and pitch work
  • 📺 Streaming Viewers: Channel60.tv serves as a public-facing portal for viewers to explore short films, experimental series, or social shorts
  • 🔧 Team-Editable: Built with markdown/MDX as the foundation so non-technical collaborators can easily update content

Future Roadmap

  • Dynamic playlist builder for video curators
  • Subscription model or login-based premium content access via Supabase Auth
  • Interactive viewer feedback for content evaluation or ratings
  • Analytics dashboard for content performance metrics

Philosophy

“Short form doesn’t mean shallow. It means focused.”

Channel 60’s digital presence reflects this belief: brief, bold, and built for engagement.

The code powering both platforms is modular, maintainable, and built with scale in mind—from a startup studio site to a streaming ecosystem.


Final Thoughts

Channel 60 exemplifies what modern content platforms can be—fast, flexible, and expressive. As the developer, my role was to translate a creative agency’s ethos into performant and elegant code that supports both artistry and business goals.

"Creative technology is about telling stories—not just hosting them."


▊