Diavox 2026 — ahogy magunknak építettük

A célkitűzés

A Diavox 2026 nem azzal a céllal indult, hogy "csináljunk egy szebb honlapot". Az volt a kérdés: mit kezdjünk azzal, hogy az ügyfeleinkkel jelenleg több helyen, több eszközben tartjuk a kapcsolatot — szerződés egy mappában, számla egy másikban, projekthaladás emailben, portfolio egy harmadik rendszerben? És hogyan álljunk át úgy, hogy közben mi magunk is gyorsabban tudjunk dolgozni?

A válasz: egy saját platform, ami három dolgot csinál egyszerre. Egy: a kifelé mutató arcunk — portfolio, megoldások, hírek, tudástár, foglalási és kapcsolati felület. Kettő: az ügyfeleink belépő pontja — ügyfélfiók, ahol minden szerződés és számla letölthető, és látják, hol tart a saját projektjük. Három: a mi üzemi rendszerünk — admin felület, ahol a tartalomtól a havi könyvelési pipeline-ig egy helyen kezelünk mindent.

A megrendelő ebben a projektben mi voltunk magunknak. Ez kényelmetlen pozíció — nincs külső deadline, ami fegyelmezne, viszont van végtelen iteráció arra, hogy ez most "elég jó-e már". Pont ezért úgy döntöttünk: ugyanazokat a szabályokat alkalmazzuk magunkra, amiket egy ügyfélprojektre. Terv, audit, jóváhagyás, implementáció, review. Nem kerülő.

A módszer — agent-vezérelt fejlesztés

Az egész fejlesztést Claude Code-dal, ágens-vezérelt módszerrel csináltuk. Ez gyakorlatban azt jelenti, hogy minden nem-triviális feature előtt egy auditor ágens átnézi, hogy mihez nyúlunk, mi a jelenlegi állapot a kódban és az adatbázisban. Utána tervet bemutat — és csak akkor megyünk implementációba, ha a terv elfogadásra kerül. Implementáció után párhuzamosan fut egy reviewer (kódminőség), egy security (sebezhetőségek, access control), és egy integration-expert (külső API mintázatok). Ami átmegy, megy tovább. Ami nem, javítva.

Mellette épül egy "második agy" — egy Obsidian vault a .brain/ mappában, ahol minden döntés, minden architektúra-leírás, minden session naplója megmarad. Ez nem hangzik forradalminak, de pont ez különbözteti meg a "lefejlesztettem és elfelejtettem" projektet egy karbantartható rendszertől. Hat hónap múlva is meg lehet nézni: miért pont így döntöttünk a 2FA implementációnál, miért nem használunk DÁP-ot, és miért került ki a Sentry konfiguráció a default toolchain-ből.

Őszintén: ez a módszer az első hetekben káosz volt. Az ágensek nem értették egymást, a párhuzamos review-k egymás kódját javították, és a "tervet elfogadtam" gyakran azt jelentette, hogy a terv félig már implementálva volt. Két hónap kellett, hogy fegyelmezett protokoll legyen belőle. Most már működik — és pont ezért a következő ügyfélprojektnél is ezt használjuk.

A technológiai stack

A frontend Next.js 15 React 19-cel, App Router-rel és server component-első megközelítéssel. A CMS Payload 3.80, fej nélküli módban — saját admin felülettel, saját mező-rendszerrel, ahol minden tartalmi blokk konfigurálható és újrahasználható. A háttérben PostgreSQL, DigitalOcean managed adatbázisként, a Drizzle ORM-en keresztül.

A package manager Bun, a runtime is Bun ahol lehet — gyorsabb mint a Node, kisebb a memória-lábnyom. A design rendszer Tailwind CSS-re és shadcn/ui primitivekre épül, saját brand színekkel, amik egy admin felületen állíthatók (BrandSettings global). Az animációkért GSAP felel a 2D-s elemeken, a hero-ban viszont egy Three.js + React Three Fiber 3D scene fut — mobil fallback-kel és reduced-motion respektálással.

Az infra DigitalOcean Droplet, Docker container-ben, saját nginx reverse proxy mögött. Az asseteket DigitalOcean Spaces (S3-kompatibilis) tárolja CDN-nel. A hozzáférést DO Cloud Firewall és Tailscale mesh VPN szabályozza — az SSH port nem publikus. A monitoring Sentry-vel és Plausible analitikával fut, az utóbbi cookie-mentes és GDPR-konform.

Az integrációk listája rövid, de mély: Billingo a számlázásra, NAV Online Számla a hatósági beküldésre (saját XML signature implementációval), WebSupport a domain-kezelésre, Stripe a kártyás fizetésekre, Google Workspace + Google Business Profile a céges adatokra, MailerSend a tranzakciós emailekre. Az autentikációhoz saját TOTP 2FA-t építettünk (egy plugin-loop bug után úgy döntöttünk, ezt magunk csináljuk), Google és GitHub OAuth-szal.

A nehéz részek (őszintén)

Pár dolog nem ment elsőre. A multi-locale rendszer — magyar és angol, hreflang-gel, locale-routing-gal, sitemap-pel, canonical URL-ekkel — háromszor lett újraírva, mert minden iteráció után jött egy SEO scan, ami talált valamit. Volt egy időszak, amikor a /hu/megoldasaink és a /en/solutions egymásra mutogatott canonical-lal. Klasszikus.

A prod és dev adatbázis elválasztása szintén tanulságos volt. Egy héten belül három migrációs incidens — egyszer egy block tábla maradt ki, egyszer egy oszlopnév-konvenció ütközött a Payload Drizzle-ével ("gbpCTAType lesz gbp_c_t_a_type, nem gbp_cta_type — minden nagybetű elé underscore"), egyszer pedig egy TRUNCATE CASCADE 20+ üzleti táblát vitt el. Mindhárom incidens javítva backup-ból, és mindhárom miatt született egy új CI gate, ami most már lefogja a hibát még mielőtt prod-ra kerülne.

A számlázási és könyvelési integrációk kifejezetten szigorú terep. A NAV protokoll XML signature-rel dolgozik, és a v3.0 specifikációja nem definiál response signature-t (ezt egy biztonsági audit közben kellett lezárni egy ADR-rel — "nem hibás, hanem nem létezik"). A Billingo szinkronnál ráfutottunk egy race condition-ra a partner-egyeztetésnél — most embed match van tax-code és név alapján, a partner_id mező opcionális.

A 2FA implementáció külön történet. Először egy létező Payload plugin-nal próbáltuk, ami egy useEffect-loop-ban beragadt. Két napi debug után úgy döntöttünk: saját TOTP implementáció. Egy hét alatt elkészült, end-to-end tesztelve, és azóta zero incidens.

A performance is kihívás volt. A hero-ban futó 3D scene asztalon szép, mobilon viszont az alacsonyabb GPU-kon dadog. Megoldás: viewport-detektálás + reduced-motion media query + statikus képes fallback. Most már 60 FPS minden eszközön, és a Core Web Vitals zöld.

Mit értünk el

Konkrét számokban: 35+ portfolio megoldás strukturáltan a Solutions collection-ben, 660+ unit teszt CI-ben futtatva, 4 saját npm package modulárisan kiszedve (@diavox/ui, @diavox/newsletter, @diavox/seo, @diavox/animation), security headers A+ minősítéssel a Mozilla Observatory-n (felső 2-3% világszinten), és egy 20+ cikkes admin kézikönyv HU+EN, közvetlenül az admin felületbe integrálva, kereshetően.

Funkcionálisan: működik a saját ügyfélfiók a /ugyfelfiok route-on, szerződés- és számla-letöltéssel, projekthaladás-jelzéssel. Működik a teljes számlázási automatika — a Billingo szinkronizálódik a NAV-val, a havi könyvelési pipeline egyetlen cron job-bal lefut. Működik a multi-office GBP integráció, ahol a két irodánk (Budapest és Siófok) külön Google Business Profile-lal van összekötve, közös admin felülettel.

A háttérben pedig: heti session-napló, döntés-archívum, és egy Obsidian vault, amiben minden tudás megőrződik. A projekt nem azzal véget ért, hogy "kész" — folyamatosan él, mert a saját üzemi rendszerünk is.

És most?

Ezt csináltuk magunknak, a saját igényeinkre. Pont ezért nem tudunk neked egy "kulcsrakész Diavox-platform"-ot eladni — ilyen nincs. Amit tudunk: ugyanezzel a módszerrel, ugyanezzel a fegyelemmel végigvinni egy projektet, amit te szeretnél megépíteni. Egyedi weboldalt. Saját admin rendszert. Ügyfélfiókot. Számlázási integrációt. Vagy bármit, ami pont olyan kell legyen, mint amilyennek elképzelted.

Ha érdekel, hogyan csinálnánk meg a tiédet — vedd fel velünk a kapcsolatot. Megbeszéljük, mi kell, hogyan, és mennyiért. Konkrétan, dátummal, számokkal. Pont úgy, ahogy ezt is csináltuk.