Unit148 Films

Platform for filmmakers to submit their film, and get supported based on what the viewer wishes to pay

Website

Unit148 Films Platform

Project Overview

Unit148 Films is a modern, responsive web platform designed to showcase and support independent filmmakers. The platform enables filmmakers to share their work with global audiences through a pay-what-you-want model that directly benefits creators. With a sleek, cinema-inspired design and intuitive user experience, the site serves as both a distribution channel and funding mechanism for independent film projects.

Key Features

For Film Viewers

  • Curated Film Library: Browse a collection of independent films with detailed information
  • Adaptive Video Player: Seamless playback experience with support for both YouTube and Vimeo embeds
  • Flexible Payment Options: Pay-what-you-want model with multi-currency support
  • Responsive Design: Optimized viewing experience across all devices from mobile to desktop

For Filmmakers

  • Film Submission System: Simple process for filmmakers to submit their work
  • Creator Dashboard: Analytics and insights on viewership and support
  • Direct Support Model: Receive contributions directly from viewers
  • Global Reach: Showcase films to an international audience

Technology Stack

Frontend

  • Framework: Next.js 14 with App Router for server-side rendering and optimized loading
  • UI Library: React 18 with TypeScript for type-safe development
  • Styling: Tailwind CSS with custom animations and component library
  • Component System: Custom UI components built with Radix UI primitives
  • State Management: React Context API for global state

UI/UX Features

  • Animations: Custom animations using CSS transitions, keyframes, and React hooks
  • Glassmorphism Effects: Modern UI with backdrop blur and transparent overlays
  • Responsive Design: Mobile-first approach with progressive enhancement
  • Accessibility: ARIA-compliant components and keyboard navigation

Payment Processing

  • Payment Gateway: Stripe integration with dynamic currency conversion
  • Multiple Currencies: Support for various international currencies
  • Secure Checkout: PCI-compliant payment processing

Performance Optimizations

  • Image Optimization: Next.js Image component with automatic optimization
  • Code Splitting: Dynamic imports for improved loading times
  • Caching Strategy: Static Generation with Incremental Static Regeneration
  • Core Web Vitals: Optimized for Largest Contentful Paint and Cumulative Layout Shift

Development Tools

  • Version Control: Git with GitHub
  • Code Quality: ESLint and Prettier for consistent code style
  • Testing: Jest for unit tests and Cypress for end-to-end testing
  • CI/CD: Automated deployment workflow

Architecture Decisions

Why Next.js?

Next.js was chosen for its hybrid rendering capabilities, allowing for optimal performance with both static generation for content pages and server components for dynamic features. The App Router provides a modern routing solution with built-in layouts and loading states.

Component Design Philosophy

The project follows a composition-based approach with small, reusable components that can be combined to build complex UI patterns. This promotes maintainability and consistent design language across the platform.

Responsive Design Strategy

Rather than creating separate mobile and desktop experiences, the design uses a flexible layout system that adapts to different screen sizes. This ensures a consistent user experience while optimizing for each device type.

Performance Considerations

The site prioritizes core web vitals with techniques like:

  • Image optimization to reduce bandwidth
  • Component-level code splitting
  • Strategic use of client and server components
  • Minimizing layout shifts with skeleton loaders

Future Enhancements

  • Filmmaker Profiles: Expanded profiles with filmmaker bios and portfolios
  • Film Collections: Curated collections based on themes or festivals
  • Subscription Model: Optional subscription tier for premium content
  • Community Features: Comments and discussion around films
  • Advanced Analytics: More detailed insights for filmmakers

Conclusion

Unit148 Films demonstrates how modern web technologies can create an engaging platform that connects independent filmmakers with audiences worldwide. By combining cutting-edge frontend techniques with a thoughtful user experience, the project provides both an impressive technical showcase and a valuable service for the independent film community.