Shortfilmed

Free short-film streaming platform

01The Challenge

Independent filmmakers lacked a clean, free home to showcase short films. Mainstream platforms bury them, and DIY setups struggle with large-file delivery, device compatibility, and cost.

02The Solution

Shortfilmed serves films as HLS straight from an S3 bucket, with a build-time script that scans the bucket for videos, thumbnails, and metadata to generate the catalog into Supabase. The Next.js app on Netlify renders genre rows and a custom react-player streaming experience, monetized with ads rather than a paywall so viewing stays free.

03Features

A custom react-player UI with skip, seek, fullscreen, auto-hiding controls, and a buffering state.

04System Architecture

Origin

AWS S3

Ingest

Ingest Script

Catalog

Supabase

App

Next.js (Netlify)

Playback

react-player

Origin

AWS S3

Ingest

Ingest Script

Catalog

Supabase

App

Next.js (Netlify)

Playback

react-player

05Technology Stack

Next.js 14 (App Router) · React 18 · Tailwind · Material Tailwind · Zustand

06Key Learnings

01Pre-transcoding films to HLS in S3 meant the app just streams the .m3u8 directly, with no server-side video work at request time.
02A build-time S3 scan generated the entire catalog dataset, keeping runtime reads cheap against Supabase.
03A custom react-player UI gave full control over the controls and buffering states the default player couldn't.
04An ad-supported model plus heavy SEO (sitemaps, IndexNow) kept the platform completely free for viewers.

Streaming / Media

Next.js 14, react-player, HLS, AWS S3, Supabase, Netlify

Visit shortfilmed.com ↗S

Shortfilmed

Free short-film streaming platform

01The Challenge

Independent filmmakers lacked a clean, free home to showcase short films. Mainstream platforms bury them, and DIY setups struggle with large-file delivery, device compatibility, and cost.

02The Solution

03Features

A custom react-player UI with skip, seek, fullscreen, auto-hiding controls, and a buffering state.

04System Architecture

Origin

AWS S3

Ingest

Ingest Script

Catalog

Supabase

App

Next.js (Netlify)

Playback

react-player

Origin

AWS S3

Ingest

Ingest Script

Catalog

Supabase

App

Next.js (Netlify)

Playback

react-player

05Technology Stack

Next.js 14 (App Router) · React 18 · Tailwind · Material Tailwind · Zustand

06Key Learnings

01Pre-transcoding films to HLS in S3 meant the app just streams the .m3u8 directly, with no server-side video work at request time.
02A build-time S3 scan generated the entire catalog dataset, keeping runtime reads cheap against Supabase.
03A custom react-player UI gave full control over the controls and buffering states the default player couldn't.
04An ad-supported model plus heavy SEO (sitemaps, IndexNow) kept the platform completely free for viewers.

Streaming / Media

Next.js 14, react-player, HLS, AWS S3, Supabase, Netlify