Shorts Demo

A short-form video sharing platform demo built for Shelby Breakpoint 2025. This app demonstrates recording, uploading, and playing videos on the Shelby Network with wallet authentication and gasless transactions.

Shelby Shorts Demo

0:00 / 0:00

Features

Video Upload & Playback

Record on device and upload to Shelby Network using @shelby-protocol/react

X-Chain Wallet Support

Connect wallets across chains with @aptos-labs/wallet-adapter-react

Gasless Transactions

Sponsor user transactions via Geomi Gas Station

Wallet Authentication

Authenticate wallets to off-chain services using @aptos-labs/siwa

Tech Stack

Technology	Purpose
Next.js 15	React framework with App Router
@shelby-protocol/react	Upload videos to Shelby Network
media-chrome	Video player components
@aptos-labs/wallet-adapter-react	Multi-chain wallet connections
@aptos-labs/gas-station-client	Gasless transaction sponsorship
@aptos-labs/siwa	Sign-In with Aptos authentication
Turso	SQLite database for video metadata
Drizzle ORM	Type-safe database queries

Source Code

GitHub Repository

View the full source code on GitHub

Getting Started

Prerequisites

Node.js 20+
pnpm 10+
Turso account for the database
Geomi account for API keys and gas station

Install dependencies

git clone https://github.com/shelby/shelby-breakpoint.git
cd shelby-breakpoint
pnpm install

Configure environment

cp .env.example .env

Set up Turso database

Create a new database in the Turso dashboard, then add your credentials:

TURSO_DATABASE_URL=libsql://your-database.turso.io
TURSO_AUTH_TOKEN=your-auth-token

Run migrations to create tables:

pnpm run db:push

Set up Geomi API keys

Get your API keys from the Geomi dashboard:

NEXT_PUBLIC_APTOS_SHELBYNET_API_KEY=your-aptos-api-key
NEXT_PUBLIC_SHELBY_SHELBYNET_API_KEY=your-shelby-api-key
NEXT_PUBLIC_APTOS_SHELBYNET_GAS_STATION_API_KEY=your-gas-station-key

See the API Keys guide for detailed instructions.

Start development server

pnpm run dev

Open http://localhost:3000 in your browser.

Funding Accounts

Before uploading videos, fund your accounts with tokens:

ShelbyUSD

Open the app and click "Profile"
Connect your wallet
Click "Copy Address" in the header
Fund at the ShelbyUSD Faucet

APT (Gas Station)

Go to your Gas Station resource in Geomi
Find the "Fee Payer Address" at the top
Copy and fund at the APT Faucet

Environment Variables

Variable	Required	Description
`TURSO_DATABASE_URL`	Yes	Turso database URL
`TURSO_AUTH_TOKEN`	Yes	Turso auth token
`NEXT_PUBLIC_APTOS_SHELBYNET_API_KEY`	Yes	Aptos Shelbynet API key
`NEXT_PUBLIC_SHELBY_SHELBYNET_API_KEY`	Yes	Shelby Shelbynet RPC API key
`NEXT_PUBLIC_APTOS_SHELBYNET_GAS_STATION_API_KEY`	Yes	Gas Station API key
`NEXT_PUBLIC_UPLOAD_ALLOWLIST_ADDRESSES`	No	Addresses allowed to upload (empty = anyone)
`NEXT_PUBLIC_RECAPTCHA_SITE_KEY`	No	reCAPTCHA v3 site key
`RECAPTCHA_SECRET_KEY`	No	reCAPTCHA v3 secret
`JWT_SECRET`	No	JWT signing secret

Database Commands

pnpm run db:generate  # Generate migration files
pnpm run db:migrate   # Run pending migrations
pnpm run db:push      # Push schema to database
pnpm run db:studio    # Open Drizzle Studio

Learn More

Video Player

Player components and configuration

Upload Guide

How to upload videos to Shelby

API Keys