Kako se Crolingo stvarno gradio — 6 faza, stack i što je puklo

U prošlom postu smo napisali tri principa koja vode Crolingo. Principi su jedno, izvođenje drugo. Ovdje je tehnički behind-the-scenes — šest faza razvoja, konkretan stack, trade-offovi i što je puklo.

FAZA 1 — Duolingo klon (nije radio)

Prvi prototip: flashcards, multiple choice, streak brojač. Klasična gamifikacija. Wafa ga koristi dva tjedna, prestaje. Problem nije bila tehnika — problem je bio što nije osjećala progress prema konkretnom cilju: A1.1 ispit za vizu.

XP score ne znači ništa kad trebaš naručiti pizzu telefonski. Ljudi ne uče jezik radi gamifikacije, uče ga radi situacija iz života.

FAZA 2 — Scenariji iz stvarnog života (pivot)

Bacili smo lekcije tipa "Lekcija 5: pridjevi". Umjesto toga: "Scenarij: razgovor s najmodavcem", "Scenarij: naručivanje u restoranu". Svaki scenarij je dijalog koji se stvarno dogodio.

Korisnik prolazi kroz dijalog, sluša, ponavlja, AI mentor ispravlja. Supabase s JSON poljima za dijaloge (fleksibilno za učestale izmjene). EU regija Frankfurt jer GDPR nije opcija, već minimum.

FAZA 3 — Audio i Whisper API (breakthrough)

Bez slušanja i govora učenje jezika ne funkcionira. Snimili smo native speakere u Splitu — ne generičke snimke, već lokalni naglasak. Konobarica u Dioklecijanovoj palači ne priča kao HRT voditeljica. Taj naglasak je bitan.

Za prepoznavanje govora: OpenAI Whisper API. Alternativa je bio Google Speech-to-Text, ali Whisper ima bolju točnost za hrvatski. Za AI feedback: Anthropic Claude. GPT-4 je bio previše verbose, Claude daje konciznije ispravke koje se lakše pamte.

Trade-off: API troškovi rastu s brojem korisnika. Svaki audio request košta. Riješili smo caching na Supabase Storage za često korištene fraze + rate limiting (max 50 requestova dnevno za free tier).

Rezultat: Wafa je za šest tjedana mogla naručiti pizzu telefonski.

FAZA 4 — 23 jezika sučelja (najveći engineering izazov)

Većina jezičnih appova ima sučelje na 1-2 jezika. Crolingo treba 23 jer korisnici dolaze iz cijelog svijeta. Ako učiš hrvatski a maternji ti je arapski, sučelje mora biti na arapskom.

Stack: next-intl (React library za internacionalizaciju) + JSON fileovi za prijevode + dinamičko detektiranje materinjeg jezika preko browser locale i user preference. RTL support za arapski i farsi (Tailwind directionality utilities).

Wafa je bila prva testerica — arapski + francuski + engleski paralelno. Našla je 14 bugova gdje se arapski tekst overlap-ao s buttonima. Testirati na stvarnom RTL user accountu, ne samo mijenjati CSS.

FAZA 5 — Mobile preko Capacitora

Trebali smo iOS i Android. Tim od tri ljudi ne može maintainati dvije native codebases (Swift i Kotlin). React Native je alternativa, ali Next.js stack je već bio tu.

Odabir: Capacitor + Next.js + React Server Components. Jedna codebase, dvije aplikacije. Capacitor wrappa Next.js app u native container s pristupom native API-jima (mikrofon, notifikacije, storage).

Trade-off: nešto je sporiji od pravog native-a. Animacije nisu toliko smooth. Ali brzina iteracije je 5x — deployamo fix na web, iOS i Android odjednom. Za tim od tri ljudi, to je razlika između shippanja featurea za tjedan ili mjesec.

Što je puklo: OAuth flow na Androidu (koristimo Magic Link). Capacitor otvara email link u external browseru, token se gubi. Riješili smo custom deep link handling + session cookie sharing između browsera i app contexta. Jedan sat debuga, jedan red koda za fix.

FAZA 6 — B2B portal (zahtjev tržišta)

Tri hotela u Splitu su nas kontaktirala: "Možemo li kupiti paket za 30 radnika?" Nije bilo planirano, ali tržište je tražilo.

Napravili smo B2B layer: admin dashboard za poslodavce (pregled svih korisnika u organizaciji), group licensing (bulk kupovina preko Stripe Checkout), progress tracking i certifikati za HZZ.

Stack extension: Supabase Row Level Security za multi-tenant (svaka organizacija vidi samo svoje korisnike), Stripe webhooks za automatsko dodjeljivanje licenci, PDF generiranje za certifikate (react-pdf).

Trade-off: dodali smo complexity u data model. Ali ROI je očit — prvi hotel je kupio 30 licenci za 6 mjeseci (1800 EUR). Feature se isplatio za dva tjedna razvoja.

Full stack za referencu

• Frontend: Next.js 16 (App Router + RSC), Tailwind CSS, next-intl

• Backend: Supabase (Postgres + Auth + Storage), EU regija Frankfurt

• AI: OpenAI Whisper API, Anthropic Claude API

• Mobile: Capacitor (iOS + Android wrapper)

• Payment: Stripe Checkout + webhooks

• Hosting: Vercel (auto-scaling, EU edge)

Svaka tehnologija je odabrana iz konkretnog razloga, ne zato što je hype. Next.js jer daje SSR + RSC + mobile kroz Capacitor. Supabase jer je Postgres s ugrađenim auth i EU hostingom. Whisper jer radi s hrvatskim bolje od Googlea. Claude jer je konciziniji od GPT-a.

U sljedećem postu — priče prvih korisnika. Što su nas naučili da im je stvarno bitno. Jedna konobarica iz Zadra, jedan kuhar iz Dubrovnika i jedan recepcioner iz Splita.