After I left Skylark and the project was discontinued after 2-3 years of development, I was able to fork SkylarkTV, our demo application, to use a portfolio piece. There was one snag - the Skylark server no longer exists... Rather than let this substantial engineering effort go to waste, I partnered with Claude AI to analyze the existing GraphQL queries and create a comprehensive mock system. By examining the query patterns, response structures, and business logic embedded in the frontend, we successfully recreated the entire API surface using Mock Service Worker (MSW). This transformation turned what could have been a dead project into a living portfolio piece that demonstrates the same complex functionality without requiring expensive backend infrastructure.
Project Overview
SkylarkTV is a mock streaming television platform that demonstrates the full capabilities of Skylark, a headless CMS designed for world-class streaming products. This project showcases advanced content management, complex availability systems, and production-quality frontend architecture.
Live Demo: skylarktv.wallis.dev Source Code: GitHub Repository Tech Stack: Next.js, TypeScript, Tailwind CSS, React Query, MSW, Skylark
The Challenge
Building a streaming platform requires handling complex business logic that goes far beyond simple content display. The application needed to support and demonstrate Skylark features such as:
- Multi-dimensional content availability (time, region, device, customer type)
- Time-travel functionality for viewing content at specific points in time
- Internationalization with dynamic language switching
- Complex content relationships (brands → seasons → episodes)
- Real-time availability filtering based on sophisticated business rules
- Enterprise-scale content management with thousands of media objects
Key Achievements
Mock System Architecture
When the original Skylark backend was discontinued, I architected a comprehensive MSW-based mocking system that:
- Preserves all original functionality without requiring expensive backend infrastructure
- Handles complex GraphQL queries with proper relationship resolution
- Maintains data consistency across related content types
- Enables portfolio demonstration without ongoing operational costs
Content Management Features
- Intelligent search across movies, episodes, brands, articles, and people
- Dynamic content highlighting with search term emphasis
- Sophisticated filtering by availability dimensions and time constraints
- Responsive design optimized for desktop, tablet, and mobile devices
Technical Highlights
Availability Rules Engine
The platform includes a sophisticated rules engine that processes complex availability logic:
- Time-based access windows
- Geographic restrictions
- Device-specific content
- Customer tier limitations
In SkylarkTV, Customer Types demonstrate the most dramatic impact on content availability. In the screenshot below, you can see three different views of the same homepage: Premium (left), Standard (middle), and Kids (right). Notice the subtle difference between Premium and Standard users - a single rail is removed - while the Kids experience is completely transformed with age-appropriate content and a simplified interface.
Complex Relationship Management
// Example: Brand → Season → Episode hierarchy
const brand = await getBrand(brandId);
const seasons = await getSeasonsForBrand(brandId);
const episodes = await getEpisodesForSeason(seasonId);
The platform handles complex content relationships while maintaining performance through intelligent caching and lazy loading.
Multi-language Support
Content can be dynamically localized with proper fallback handling:
const localizedContent = mergeTranslatedContent(
baseContent,
translations[languageCode]
);
Future Enhancements
In the future I want to use SkylarkTV to validate whether with thorough testing, developers can merge dependency upgrades without worrying about breaking changes. The current plan is to create Playwright tests across the whole application, configure Renovate in the repository and allow automatic pull request merging when the build passes.
Conclusion
SkylarkTV represents a sophisticated example of modern web development, combining advanced frontend techniques with complex business logic. The project demonstrates the ability to work with enterprise-scale content management systems while maintaining excellent user experience and developer productivity.
The transition from a live backend to a comprehensive mock system showcases problem-solving skills and architectural thinking - turning a cancelled project into a valuable portfolio piece that continues to demonstrate technical capabilities without ongoing infrastructure costs.