Fragments is a web-app and chromium extension designed for creators who believe that great work is shaped by intentional consumption. Ideas do not appear in isolation. They emerge from moments you notice, save, and revisit over time. In many creative fields, a short video clip can convey more insight than pages of text.
Fragments helps you capture, organize, and rediscover those moments so they are available when you need them most, built with Mux and Supabase for the DEV's Worldwide Show and Tell Challenge 2025.
- Next.js 15
- Mux (Video processing and streaming and AI features)
- Supabase (Authentication and Database)
- Tailwind CSS + Shadcn UI
- Node.js 20 or higher
- Mux account and API tokens
- Supabase project and service role key
Create a .env file in the root directory with the following variables.
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
MUX_TOKEN_ID=your_mux_token_id
MUX_TOKEN_SECRET=your_mux_token_secret
MUX_WEBHOOK_SECRET=your_mux_webhook_secret
DASHBOARD_URL=http://localhost:3000
- Open your Supabase SQL Editor.
- Copy the contents of db/schema.sql and execute the script.
- This will create the fragments table, necessary indexes, and RLS policies.
Install dependencies.
npm installRun the development server.
npm run devTo build for production, run:
npm run buildThe application will be available at http://localhost:3000.
The extension allows for direct screen recording into the platform.
- Navigate to chrome://extensions in your browser.
- Enable Developer mode.
- Click Load unpacked.
- Select the fragments/extension directory.
- Configure the extension with your local or deployed dashboard URL.
MIT License