Social Content Studio (SvelteKit + Remotion)

A mobile-first content operations app that converts raw articles and social posts into branded social media assets.

This project combines SvelteKit, PocketBase, Remotion, Mistral, and Replicate to automate the full workflow from ingestion to render delivery.

What This Project Does

• Ingests content from RSS and Reddit into PocketBase
• Supports manual content creation with media upload or AI image generation
• Generates platform-ready assets using Remotion templates (9:16 video, 4:5 image, tweet-style image)
• Processes jobs asynchronously with a persisted render queue
• Streams live progress updates to the UI via server-sent events
• Organizes generated outputs in dedicated gallery and renders views

Product Workflow

1. Add feed sources in /feeds or create a post manually in /create
2. Review incoming content in the feed at /
3. Open a record at /scraped/[id] and choose template + generation settings
4. Queue rendering and track progress in real time
5. Review/download finished assets in /gallery and /renders

Screenshots

Feed

Generate

Sources

Gallery

Architecture

• Frontend: SvelteKit + Svelte 5 (mobile-first UI)
• Render engine: Remotion (React compositions under src/remotion)
• Backend: PocketBase (records, brands, metadata, render jobs)
• AI provider (text generation): Mistral
• AI provider (image generation): Replicate
• Background processing (renders): src/lib/render-queue.ts
• Background processing (ingestion): src/lib/server/scrape-queue.ts

Engineering Highlights

• Persistent queue design with job recovery on restart
• Source scheduling for RSS/Reddit ingestion (hourly, 6h, daily)
• Schema-aware handling for generated metadata fields
• Runtime props validation for template safety using Zod
• Real-time UX feedback through centralized progress broadcasting

Tech Stack

• SvelteKit, Svelte 5, TypeScript
• Remotion (@remotion/cli, @remotion/player, @remotion/media-parser)
• PocketBase
• Mistral API
• Replicate API
• Tailwind CSS

Local Setup

1) Install dependencies

npm install

2) Configure environment variables

cp .env.example .env

Required variables:

• PRIVATE_POCKETBASE_URL
• PUBLIC_POCKETBASE_URL
• PRIVATE_POCKETBASE_ADMIN_USERNAME
• PRIVATE_POCKETBASE_ADMIN_PASSWORD
• PRIVATE_REPLICATE_API_TOKEN
• PRIVATE_MISTRAL_API_KEY

Optional variables:

• PRIVATE_REPLICATE_MODEL (defaults in code if omitted)

3) Initialize PocketBase schema

Import pb_schema.json into your PocketBase instance.

4) (Optional) Seed sample data

npx tsx scripts/seed-database.ts

5) Start development server

npm run dev

Scripts

• npm run dev - start dev server
• npm run build - production build
• npm run preview - preview production build
• npm run check - Svelte + TypeScript checks
• npm run lint - ESLint

Core Routes

• / - content feed with filters and infinite scroll
• /scraped/[id] - per-item generation workspace
• /create - manual content creation flow
• /feeds - feed source management
• /gallery - generated metadata and outputs
• /renders - rendered media library
• /dev - internal development tools

Selected API Endpoints

• POST /api/render-queue - enqueue render jobs
• GET /api/render-queue - queue status/jobs
• POST /api/generate-single - generate one template from source content
• POST /api/generate-bundle - generate multi-variation asset bundle
• POST /api/manual-create - create + enqueue from manual input
• GET /api/feeds - list/test feed sources
• POST /api/feeds - create feed source
• GET /api/progress/stream - real-time progress SSE

Docker

docker compose up --build