AI content tým pro Instagram tvůrce
SaaS platforma, která automatizuje tvorbu obsahu na Instagram. AI titulky za 30 sekund místo 30 minut, plánování příspěvků, brainstorming s Claude AI a automatické odpovědi na komentáře a zprávy - vše v jedné aplikaci.
Klient
Interní produkt
Typ
AI SaaS Platforma
Role
Full-stack Development, AI Integration, Product Design
Stack
Next.js 15 + Spring Boot
O projektu
Klient a cíl
SocialMat je interní SaaS produkt cílený na české a slovenské Instagram tvůrce. Platforma řeší časově náročné úkoly spojené s tvorbou obsahu - od titulkování videí přes plánování příspěvků až po správu interakcí s followery.
Cílem bylo vytvořit "AI content tým v jedné aplikaci", který tvůrcům ušetří hodiny týdně a umožní jim soustředit se na kreativní stránku tvorby místo rutinní produkční práce.
Scope
- ✓AI titulky s OpenAI Whisper a FFmpeg WASM export
- ✓Obsahový kalendář s auto-publish přes Instagram API
- ✓AI brainstorming s Claude pro nápady a popisky
- ✓Auto-reply engine pro komentáře a DM s pravidly
- ✓Analýza konkurence se sémantickým vyhledáváním
- ✓Stripe billing s FREE / PRO / BUSINESS plány
Výzva
Instagram tvůrci v ČR a SR tráví 3-5 hodin denně rutinní prací - ruční titulkování videí, plánování příspěvků v tabulkách, vymýšlení popisků a odpovídání na komentáře. Profesionální nástroje jako Later nebo Hootsuite nepodporují češtinu, nemají AI funkce pro lokální trh a jsou cenově mimo dosah menších tvůrců.
Cílem bylo vytvořit all-in-one platformu, která kombinuje automatické titulky (30 sekund místo 30 minut ručně), inteligentní plánování s auto-publish, AI asistenta pro brainstorming v češtině a automatizaci engagement - vše s moderním UI optimalizovaným pro mobilní tvůrce a cenově dostupné pro český trh.
Technické řešení
Frontend
- Next.js 15 + React 19
- TypeScript 5
- Tailwind CSS 4
- Framer Motion
- FFmpeg WASM
- Radix UI + Shadcn
Backend & Data
- Spring Boot 3 (Java 17)
- PostgreSQL + pgvector
- Redis Cache
- Stripe Payments
- JWT Authentication
- OpenAPI / Swagger
AI & Integrace
- Claude AI (brainstorming, generování)
- OpenAI Whisper (transkripce)
- Instagram Graph API
- FFmpeg (video processing)
- Deepgram (plánováno)
- ElevenLabs (plánováno)
Klíčové funkce
AI titulky za 30 sekund
Upload videa, automatická transkripce přes OpenAI Whisper, editor stylů titulků s real-time náhledem a export jako SRT nebo MP4 s vypálenými titulky pomocí FFmpeg WASM přímo v prohlížeči.
Obsahový kalendář s plánováním
Měsíční kalendář s drag-and-drop plánováním příspěvků, podpora Reels, Stories i klasických postů. Automatické publikování přes Instagram Graph API s náhledem a správou médií.
AI Brainstorming s Claude
Chat rozhraní napojené na Claude AI pro generování nápadů, popisků, hashtagů a scénářů. Systém šablon s kategoriemi (captions, hooks, CTA, trendy) a ukládání historie konverzací.
Auto-Reply systém
Pravidlová automatizace odpovědí na komentáře a DM. Trigger typy (klíčová slova, zmínky, otázky), regex matching, AI generované odpovědi a nastavitelné zpoždění pro přirozený dojem.
Analýza konkurence s pgvector
Sledování konkurenčních účtů, sémantické vyhledávání podobného obsahu pomocí PostgreSQL pgvector embeddings, automatický discovery přes Apify scraping a personalizované doporučení.
Video editor pro Instagram
Trimming, crop na 9:16 pro Reels, overlay titulků, hudba a zvukové efekty. Stylizace a export optimalizovaný pro Instagram s FFmpeg WASM zpracováním na straně klienta.
Technické výzvy
Video processing v prohlížeči bez serveru
Výzva
Zpracování videa (trimming, subtitle burn-in, export) tradičně vyžaduje server s FFmpeg. Serverové řešení by znamenalo vysoké náklady na compute a latenci při uploadu/downloadu velkých souborů.
Řešení
Implementovali jsme FFmpeg WASM, který běží kompletně v prohlížeči uživatele. Video se nikdy neopustí klientský device - zpracování probíhá lokálně s progress trackingem a výstup je okamžitě ke stažení. Zero server costs pro video processing.
Real-time synchronizace plánovaných příspěvků
Výzva
Obsahový kalendář musí být konzistentní při současném přístupu z více zařízení, podporovat drag-and-drop přesuny a okamžitě reflektovat změny statusu (draft → scheduled → published → failed).
Řešení
Postavili jsme na Spring Boot @Scheduled tasků pro auto-publishing s optimistic locking v PostgreSQL. Frontend polling s intelligent cache invalidation zajišťuje konzistenci. Instagram Graph API integrace pro spolehlivé publikování s retry mechanismem.
Přesná transkripce češtiny z krátkých videí
Výzva
Instagram Reels jsou typicky 15-90 sekund s hudbou na pozadí, rychlou mluvou a slangem. Standardní STT modely mají s krátkými českými nahrávkami problém s přesností.
Řešení
Integrace OpenAI Whisper API s automatickou detekcí jazyka a možností manuálního nastavení. Backend extrahuje audio track přes FFmpeg, odesílá na Whisper API a parsuje timing pro přesné word-level titulky. Uživatel může výsledek ručně doladit v editoru.
Škálovatelný auto-reply s pravidlovým enginem
Výzva
Auto-reply systém musí v reálném čase vyhodnocovat příchozí komentáře a DM proti sadě pravidel (keywords, regex, zmínky) a generovat kontextové odpovědi bez spamu a duplicit.
Řešení
Rule engine v Spring Boot s podporou CONTAINS, EXACT a REGEX matching, exclude keywords, follower-only filtrování a nastavitelným zpožděním. Claude AI generuje odpovědi s tónem nastaveným per-uživatel. Webhook integrace s Instagram API pro real-time zpracování.
Subtitle Pipeline
Upload & Extrakce
Uživatel nahraje video. Backend extrahuje audio stopu přes FFmpeg pro transkripci.
AI Transkripce
OpenAI Whisper zpracuje audio a vrátí text s přesným word-level timingem.
Styling & Preview
Editor titulků s výběrem fontů, barev, pozice a animací. Real-time náhled na videu.
Export v prohlížeči
FFmpeg WASM vypálí titulky do videa přímo v prohlížeči. Stažení hotového MP4.
Architektura
Frontend
Next.js 15 s App Routerem a React 19. Vlastní design systém s hand-drawn estetikou ("Sketchy" komponenty) pro přátelský, organický vzhled. Dark/light mode, responsivní sidebar s animacemi, Framer Motion pro přechody.
API klient generovaný přes Orval z OpenAPI specifikace. JWT autentizace s automatickým refresh tokenů. Grafana Faro pro frontend monitoring.
Backend
Spring Boot 3 s Java 17 a layered architecture (Controller → Service → Repository). PostgreSQL s pgvector pro sémantické vyhledávání, Redis pro caching hot dat. 25 REST controllerů, 30 služeb, 37 entit.
Async zpracování videa s @Scheduled tasky pro auto-publishing. Stripe integrace pro billing, Instagram Graph API OAuth flow a webhook handling pro real-time notifikace.
Design systém a branding
Klíčové principy
Hand-drawn estetika
Vlastní "Sketchy" komponenty s organickými tvary, nepravidelnými okraji a ručně kreslenými SVG ikonami. Přátelský, kreativní vzhled cílený na Instagram tvůrce.
Instagram brand barvy
Gradient z fialové přes růžovou po oranžovou - barvy Instagramu prostupují celým UI jako akcenty, CTA tlačítka a hover efekty pro vizuální propojení s platformou.
Dark & Light mode
Plná podpora tmavého a světlého režimu s perzistencí v localStorage. DashboardThemeProvider context zajišťuje konzistentní mapování barev napříč všemi komponentami.
Animace a mikro-interakce
Framer Motion pro page transitions, modal entries, button hover states a list reveals. Kolapsovatelný sidebar s spring animací. Skeleton screens a toast notifikace přes Sonner.
Barevná paleta
Instagram Purple
#833AB4
Primární akcent
Instagram Pink
#E1306C
Sekundární akcent
Instagram Orange
#F77737
Terciární akcent
Dark Background
#1A1A2E
Dashboard dark mode
Light Surface
#FFFFFF
Dashboard light mode
Muted Gray
#6B7280
Sekundární text
Klíčové stránky dashboardu
Titulky (Subtitles)
/dashboard/titulky
- •Upload videa s drag-and-drop
- •AI transkripce přes OpenAI Whisper
- •Editor stylů titulků (font, barva, pozice, animace)
- •Real-time preview s video přehrávačem
- •Export jako SRT nebo MP4 s vypálenými titulky
- •Správa projektů s vyhledáváním a filtrováním
Kalendář (Content Calendar)
/dashboard/calendar
- •Měsíční pohled s vizuálními náhledy příspěvků
- •Drag-and-drop plánování na konkrétní datum a čas
- •Status indikátory (draft, scheduled, published, failed)
- •Podpora Reels, Posts i Stories
- •Auto-publish přes Instagram Graph API
AI Brainstorm
/dashboard/aicontent
- •Chat rozhraní napojené na Claude AI
- •Systém šablon (captions, hooks, CTA, scénáře, trendy)
- •Ukládání historie konverzací
- •Markdown rendering AI odpovědí
- •Mobilní sidebar s vyhledáváním v historii
Auto-Reply
/dashboard/autoreply
- •Master on/off pro celý systém
- •Tvorba pravidel (keywords, regex, zmínky, otázky)
- •Akce: reply, DM, ignore, flag
- •Real-time statistiky a activity feed
- •Performance metriky per pravidlo
Video Editor
/dashboard/editor
- •Trimming a cropping videa
- •Subtitle overlay a styling
- •Hudba a zvukové efekty
- •Instagram-optimalizovaný export (9:16 pro Reels)
- •FFmpeg WASM zpracování na klientu
Nastavení (Settings)
/dashboard/settings
- •Profil, Instagram účty, AI nastavení, branding
- •Notifikace a bezpečnost
- •Stripe billing a správa předplatného
- •Jazykové preference pro AI (cs, sk, en)
- •Custom tón odpovědí a obsahu
Čísla
25
REST Controllerů
30
Backend služeb
37
Databázových entit
81+
API funkcí (Orval)
3
Cenové plány
3
AI integrací
Co jsme se naučili
FFmpeg WASM šetří infrastrukturu
Video processing kompletně v prohlížeči eliminuje server costs a latenci. Uživatel nemusí uploadovat video na server - zpracování probíhá lokálně s okamžitým výstupem. Trade-off je vyšší nároky na klientský device.
Orval + OpenAPI = typový most
Generování TypeScript API klienta z OpenAPI specifikace Spring Bootu vytváří type-safe most mezi frontendem a backendem. Změna v backendu se okamžitě projeví jako TypeScript error ve frontendu.
pgvector stačí na sémantický search
Pro sémantické vyhledávání podobného obsahu nepotřebujete dedikovaný vector DB. PostgreSQL s pgvector extension zvládne embeddings pro tisíce příspěvků s minimální latencí - a máte vše v jedné databázi.
Hand-drawn UI buduje brand
Custom Sketchy komponenty s organickými tvary a ručně kreslenými ikonami odlišují SocialMat od generických SaaS dashboardů. Investice do vlastního design systému se vyplatí v rozpoznatelnosti brandu.
Výsledek
SocialMat je kompletní AI SaaS platforma pro Instagram tvůrce s plně funkčním frontendem v Next.js 15 a robustním Spring Boot backendem. Automatické titulky s OpenAI Whisper a FFmpeg WASM exportem snižují čas na titulkování z 30 minut na 30 sekund. Obsahový kalendář s auto-publish eliminuje ruční publikování a AI brainstorming s Claude generuje nápady, popisky a hashtahy v přirozené češtině.
Platforma pokrývá celý workflow Instagram tvůrce — od nápadu přes produkci až po publikaci a engagement. Backend s 25 REST controllery, 37 entitami a integrací se Stripe, Instagram Graph API a dvěma AI poskytovateli (Anthropic Claude a OpenAI) demonstruje naši schopnost dodat komplexní full-stack SaaS produkt od prázdného repozitáře po production-ready aplikaci s autentizací, billing systémem a real-time integrací se sociálními sítěmi.
Chcete vlastní AI SaaS platformu?
Rádi s vámi probereme, jak můžeme AI a automatizaci integrovat do vašeho produktu nebo byznysu.