Pokud vlastníte nebo provozujete webovou aplikaci, možná tu najdete slabá místa svého podnikání, o kterých jste zatím nevěděli.
Webové aplikace.
Jsou známé ve dvou provedeních. Webová stránka prezentuje obsah - uživatel ji čte, konzumuje informace, ale nepracuje v ní. Například blog, noviny, firemní prezentace, dokumentace, jiný statický obsah.
Pak druhá forma - webová aplikace řeší úkol. Uživatel v ní aktivně pracuje s daty - vytváří je, používá, upravuje, rozhoduje. Má perzistentní stav, vyžaduje vstup od uživatele, obsahuje byznys logiku a typicky ví, kdo uživatel je.
Oproti klasické desktopové aplikaci webová aplikace nevyžaduje instalaci, funguje na všech zařízeních s prohlížečem, je k dispozici kdykoliv. Nejběžnější podoby jsou e-commerce, interní firemní nástroje, CRM, CMS, HR systémy, komunikační aplikace, rezervační systémy, projektový management, vzdělávací platformy a mnoho dalších.
Vlastníkem a provozovatelem je zpravidla podnikatel nebo firma.
Riziko špatného začátku.
Ze začátku typicky nevíte přesně, co potřebujete, nerozumíte technologiím, rozhodujete podle ceny nehledě na vhodnost řešení a nepřemýšlíte o dlouhodobých výsledcích. Pokud vaše podnikání stojí na softwaru, je dost možné, že jste zvolili snadnou cestu v podobě hotového řešení.
Hotové řešení jako CMS, no-code/low-code platformy, hotové eshopy, "Udělej si sám" nástroje. Sázka na nejrychlejší a nejlevnější start vypadá jako správná volba. Zajišťuje to nízké náklady a rychlé spuštění. Množství takto zpracovaných webů je obrovské. Stačí se podívat na růst těchto platforem a množství jejich uživatelů.
Dlouhodobě narážíte na limity platformy a musíte se tomu přizpůsobit. Konkurenční výhoda je téměř nemožná. A pokud se obrátíte na agentury nebo freelancery, je velmi možné, že dostanete finální produkt zpracovaný stejným způsobem.
Moderní riziko.
V posledních letech tuto realitu dále posilují nástroje umělé inteligence a tzv. "vibe coding".
"Vibe coding" znamená, že vývojář místo psaní kódu zadává instrukce AI nástroji a přijímá výsledek bez hlubšího porozumění tomu, co vzniká. Aplikace vznikají mnohem rychleji, ale kvalita základu dále klesá.
Jak to vypadá v praxi.
Co vidíme nejčastěji: Složité, nepřehledné, neintuitivní uživatelské rozhraní, které je v rozporu s byznys logikou, prázdné stránky nebo stránky s chybovými hlášeními, možnost platby jen jedním ne zcela vyhovujícím způsobem, "auto translate" místo úplné internacionalizace, zjevné problémy SEO, nefunkční tlačítka a formuláře, ztráta, duplicita, neúplnost odeslaných údajů nebo objednávek, chybná nebo žádná notifikace o událostech, nefunkční vyhledávání, neexistuje možnost napojit externí služby.
Na pozadí pak kvalita kódu, nutnost manuálních zásahů do věcí, které by měly být automatické, problémy s bezpečností, přístupností, zálohováním, nemožnost rozšiřování a škálování aplikace.
Dlouhodobý dopad.
Špatně postavený software není jen technický problém, je to zásadní problém celého podnikání. Brzdí růst, konzumuje energii a prostředky, neumožňuje rozvoj, omezuje možný zisk. Nemůžete reagovat na příležitosti, protože software to neumožní.
Reálný scénář nemusí být, že "firma zanikne". Spíš firma nikdy nedosáhne toho, čeho mohla a pomalu ztrácí konkurenceschopnost. A to je možná nejhorší aspekt celého problému - nevíte co nevíte. Nikdy jste nezažili, jak by to mohlo fungovat "správně", takže nemáte srovnání.
Vidíte symptomy - vývoj je pomalý, změny jsou drahé, pořád něco nefunguje, ale nespojíte si to s tím, že kořen problému je špatné rozhodnutí, které jste udělali kdysi před xxx lety. Místo toho hledáte příčinu jinde a řešení, které zvolíte, je stejné jako tehdy.
Existuje taky jiná cesta.
Lepší cesta a očekávání.
Je tu několik podmínek, které to vyžaduje. První je podnikatel nebo jeho zástupce jako product owner. Nestačí zadat projekt a čekat na výsledek. Musíte rozumět každé funkci, kterou budujete a důvodům, proč ji budujete. Aktivně rozhodovat o prioritách a průběžně validovat, že to, co vzniká, odpovídá vaší podnikatelské vizi. Náhodná osoba nemůže být "vlastníkem produktu" za vás.
Druhá je software přesně na míru s kvalitním základem. Ne kompromis kvůli limitům platformy nebo šabloně. Každá část systému musí existovat z konkrétního byznys důvodu a základ musí být postavený tak, aby se dal rozvíjet. Aplikace může mít na začátku omezenou funkcionalitu, ale musí být kvalitně postavená a plně v souladu s byznys vizí od prvního dne. To je jediná cesta, která dlouhodobě dává smysl.
Musíte počítat s tím, že vlastní aplikace je dlouhodobá investice, ne jednorázový výdaj. První funkční verze se počítá v měsících, celková vize možná i v letech. A to není chyba, je to přirozený důsledek toho, že aplikace roste spolu s byznysem.
Webová aplikace je živý systém, který se průběžně rozvíjí. Náklady jsou výrazně vyšší než u hotového řešení a nekončí spuštěním - provoz, rozvoj a údržba jsou průběžné položky, které nikdy nekončí. Kdo to takto nebere od začátku, dříve nebo později se ocitne ve stejné situaci jako s hotovým řešením. Jen s větší investicí za sebou.
To je těžko stravitelné, zvláště pokud jste nikdy nezažili, jak to může fungovat správně. "Udělej si sám" funguje pomalu, omezeně, ale funguje. Bolest není dost velká, aby ospravedlnila vyšší investici, jejíž hodnotu zatím nemáte s čím porovnat.
Tato cesta proto reálně připadá v úvahu pouze pro toho, kdo má počáteční kapitál a jasnou vizi, nebo už si na vlastní kůži zažil, co znamená stavět byznys na špatném základě a pochopil, co ho to stálo.
Kdo je "product owner"
Product owner je persona, která za produkt nese plnou odpovědnost. Není to projektový manažer ani koordinátor - je to člověk, který rozumí byznysu, rozumí uživatelům a aktivně rozhoduje, co se staví, v jakém pořadí a proč.
V praxi to znamená, že product owner průběžně komunikuje s vývojovým týmem, validuje, co vzniká, odmítá, co nesedí a určuje priority podle byznys hodnoty - ne podle toho, co je technicky zajímavé nebo co si vývojář myslí, že by bylo fajn mít.
Pokud tuto roli nikdo neplní, vývojový tým staví podle vlastního uvážení. Výsledek může být technicky správný, ale byznysově mimo. A to se zpravidla pozná až pozdě.
V případě malého podniku je přirozeným product ownerem sám podnikatel. Pokud na to nemá kapacitu, může tuto roli delegovat na někoho, kdo byznys dobře zná a má pravomoc rozhodovat. Ale nikdy na někoho, kdo pouze přeposílá požadavky mezi podnikatelem a vývojáři - to není product owner, to je prostředník.
Porovnání přístupů
Standardní, "zdarma"
Lepší, "premium+"
Výchozí rozhodnutí
cena a rychlost
vize a základ
Typ řešení
platforma, hotová šablona
software na míru
Role podnikatele
zadavatel, DIY vývojář
product owner, který řídí
Funkcionalita
vše hned, nekvalitně
méně na začátku, ale kvalitně
Architektura
omezená platformou
postavená pro růst
Kód
skrytý, cizí, neudržovatelný
vlastní, čistý, rozšiřitelný
Náklady
nízké na začátku, rostou skrytě
vyšší od začátku, předvídatelné
Rozvoj
pomalý, drahý, omezený
přirozený, plánovaný
Změny
drahé a pomalé
součást procesu
Konkurenční výhoda
téměř nemožná
reálná
Závislost
na platformě nebo dodavateli
vlastní systém, vlastní znalost
Technický dluh
nevyhnutelný, neviditelný
vědomě řízený
Dlouhodobý výsledek
stagnace, ztracený potenciál
byznys roste spolu se softwarem
Vývoj výkonu a nákladů v čase
Výkon - Standardní, "zdarma"
Výkon - Lepší, "premium+"
Náklady - Standardní, "zdarma"
Náklady - Lepší, "premium+"
Standardní řešení startuje rychleji - výkon roste, pak brzy stagnuje a začne klesat. Náklady přitom rostou po celou dobu.
U lepšího řešení se to rozjíždí pomaleji, ale výkon roste kontinuálně, zatímco náklady postupně klesají.
Pro vývoj aplikací používáme:
Frontend
JavaScript, TypeScript, Next.js
Vše, co uživatel vidí a s čím pracuje v prohlížeči - rozhraní, interakce, vizuální stránka aplikace.
Backend
Node.js, Nest.js, DDD, CQRS, Event Sourcing
Logika aplikace, zpracování požadavků, byznys pravidla, komunikace s databází a externími službami.
TDD
Jest, Vitest, Playwright, unit, integrační, e2e testy
Automatizované testování, které ověřuje, že aplikace funguje správně - na úrovni jednotlivých funkcí, integrace i celých uživatelských scénářů.
Databáze
PostgreSQL, MongoDB, Redis, Kafka, RabbitMQ
Uložení, struktura a správa dat aplikace.
API
REST, GraphQL, WebSocket
Rozhraní pro komunikaci mezi frontendem a backendem, případně s externími službami.
Ochrana aplikace a dat před neoprávněným přístupem, útoky a úniky dat.
Deploy
AWS, Google Cloud, Azure, VPS
Prostředí a nástroje pro nasazení aplikace do provozu.
Výkon
Caching, CDN, lazy loading, load balancing
Optimalizace rychlosti a škálovatelnosti aplikace pod zátěží.
Monitorování
Sentry, Grafana, Prometheus, logging, alerting
Sledování stavu aplikace v reálném čase, zachytávání chyb a anomálií.
Případová studie.
Co obsahuje, jak funguje a kolik stojí vývoj této webové aplikace.
Tato webová aplikace je postavená jako firemní prezentace s interaktivním obsahem a kontaktním formulářem. Jejím cílem je nabídnout služby a umožnit potenciálním zájemcům snadno navázat kontakt.
Zároveň slouží jako ukázka základních stavebních prvků moderní webové aplikace - správa uživatelů, přihlašování, práce s databází, vícejazyčnost, zpracování formulářů.
Je to plnohodnotná aplikace s backendem, databází, autentizací a automatizovaným nasazením. Pokrývá kompletní životní cyklus - uživatelská rozhraní, logiku backendu, automatizované testování a nasazení. Výsledkem je bezpečná, testovaná a udržovatelná aplikace s čistou architekturou, která funguje spolehlivě a dá se dál rozvíjet.
Frontend - Pohled uživatele.
Hlavní stránka s obsahem a navigací.
Stránka s hlavičkou, interaktivním obsahem a patičkou, je optimalizovaná pro vyhledávače (SEO) - obsahuje správně strukturovaná metadata, titulky a popisky. Aplikace je přizpůsobená pro čtečky obrazovky a asistivní technologie.
Vícejazyčné rozhraní.
Aplikace podporuje internacionalizaci. Jazyk se nastaví automaticky podle prohlížeče, uživatel ho může kdykoli přepnout. Volba se zapamatuje i pro příští návštěvu. Systém lokalizace je navržený tak, aby šlo snadno přidat další jazyky.
Světlý a tmavý režim
Uživatel může přepínat mezi světlým a tmavým vzhledem. Volba se uloží a při dalším otevření stránky se použije automaticky. Ikona stránky se mění podle zvoleného režimu.
Chybové stránky, tzn. 404 a 500.
Pokud uživatel zadá neexistující adresu, zobrazí se stránka s informací a odkazem zpět na hlavní stránku. Stejně tak při neočekávané chybě aplikace.
Přihlášení a odhlášení
Uživatel se může přihlásit pomocí účtu u externího poskytovatele. Po přihlášení se rozhraní změní - místo tlačítka pro přihlášení se zobrazí jméno, avatar uživatele a možnost odhlášení. Autentizace funguje přes standardní OAuth protokol - je možné přidat libovolného OAuth poskytovatele přidáním odpovídající konfigurace nebo implementovat vlastní autorizační logiku jako další metodu vedle externích poskytovatelů.
Kontaktní formulář
Formulář s poli pro jméno, email, URL projektu, popis potřeb a další údaje. Aplikace uživateli potvrdí odeslání nebo ukáže, co je potřeba opravit.
Informování uživatele o důležitých událostech
Uživatel je informován o důležitých událostech pomocí vyskakovacích notifikací - například při přihlášení, odhlášení nebo když dojde k chybě na straně backendu.
Backend aplikace
K čemu slouží Backend.
Na samostatném serveru se zpracovávají data a business logika. Backend komunikuje s frontendem přes definované API endpointy - není přístupný zvenku.
Správa relací
Při první návštěvě se vytvoří relace, do které se ukládají preference uživatele (jazyk, téma). Pokud relace vyprší, vytvoří se nová a uživatel pokračuje bez přerušení. Tato data lze dále využít pro analýzu chování uživatelů na webu, vyhodnocování nejčastějších preferencí nebo cílení marketingových aktivit.
Autentizace
Přihlášení probíhá přes externího poskytovatele pomocí OAuth. Po úspěšném přihlášení se vydá JWT token a uživatelská data se napojí na relaci. Každé přihlášení a odhlášení se zaznamenává s časovým razítkem.
Bezpečnost
Požadavky jsou omezovány rate limiterem s odstupňovanými limity podle citlivosti endpointu. Požadavky od botů se detekují a tiše zahazují. Každý požadavek je ověřen, že patří odesílateli.
Validace vstupů
Server přijímá pouze povolená pole - vše ostatní odmítne. Auth data (jméno, email, avatar) nelze přepsat přes preferenční endpoint. Hodnoty jazyku a tématu procházejí kontrolou, aby do systému nepronikla neočekávaná nebo nepovolená data.
Kontaktní formulář
Backend přijímá data z formuláře, validuje je a ukládá do databáze. Požadavky identifikované jako od botů se tiše zahodí, aniž by se cokoli uložilo. Účelem je chránit databázi před spamem a zajistit, že uložená data pochází od skutečných uživatelů.
Trasování požadavků
Každý požadavek dostane unikátní trace ID. Toto ID se vrací v response hlavičkách, takže frontend i vývojáři mohou konkrétní požadavek dohledat. Usnadňuje to diagnostiku problémů - při nahlášení chyby lze přesně identifikovat, co se na serveru stalo.
Preflight check poskytovatele
Před přesměrováním na externího poskytovatele backend ověří, že je poskytovatel dostupný. Pokud není, uživatel se nepošle na nefunkční stránku.
Graceful shutdown
Server se vypíná čistě - dokončí rozpracované požadavky a teprve pak ukončí proces. Nedochází ke ztrátě dat ani k otrhanému spojení.
Jak je aplikace postavená - technologie, testy a nasazení.
Monorepo
Projekt je organizovaný jako monorepo - frontend, backend a sdílený kód (typy, konstanty, UI komponenty) žijí v jednom repozitáři. Účelem je jednodušší správa závislostí, sdílení kódu a konfigurací mezi projekty a možnost provádět změny napříč celou aplikací v jednom kroku, usnadnění správy jednotlivých prvků a orchestrace buildů. Aplikace používá minimální množství externích závislostí - snižuje se tím riziko bezpečnostních zranitelností, zjednodušuje se údržba a aktualizace a zmenšuje se výsledná velikost aplikace.
Frontend
Next.js je framework pro React, který zajišťuje serverové renderování, routing a optimalizaci výkonu. React je knihovna pro tvorbu uživatelských rozhraní z komponent. TypeScript přidává typovou kontrolu, odhaluje chyby už při psaní kódu. Sass rozšiřuje CSS o proměnné, zanořování a modularitu, takže styly jsou přehlednější a lépe udržovatelné.
Backend
Node.js s vlastním HTTP serverem. TypeScript, MongoDB jako databáze. JWT (JSON Web Token) pro správu tokenů - umožňuje ověřit identitu uživatele bez nutnosti dotazovat databázi při každém požadavku. Architektura využívá zavedené návrhové vzory: čistá architektura, DDD (Domain-Driven Design - strukturování kódu kolem doménových entit a pravidel místo technických vrstev), CQRS (oddělení čtení a zápisu dat - umožňuje optimalizovat každou operaci nezávisle), command, factory a middleware.
Testování
Aplikace je testovaná na více úrovních. Unit testy ověřují izolované části (konfigurace, logger, bootstrap) na nativním Node.js test runneru a pomocí Jestu s Testing Library. E2E testy backendu běží proti reálné MongoDB - testy ověřují skutečné chování aplikace. E2E testy frontendu přes Playwright simulují reálného uživatele v prohlížeči - kompletní flow včetně přepínání jazyků, témat, přihlášení a odesílání formuláře. Testy jsou součástí CI/CD pipeline - spouští se automaticky při každém buildu a pokud jakýkoli test selže, image se nevytvoří a nasazení se zastaví. Do produkce se dostane jen otestovaný kód.
CI/CD pipeline
Každá aplikace má vícefázový Dockerfile: pruning závislostí, spuštění testů, build produkčního kódu a finální minimální image. Backend se bundluje do jednoho souboru, frontend produkuje standalone Next.js výstup. Všechny operace (vývoj, testy, build, Docker, nasazení) se ovládají přes Makefile - jednotné rozhraní pro vývojáře i CI. Push do hlavní větve spustí GitHub Actions workflow - sestaví Docker images, spustí testy v kontejneru, nasadí přes SSH na VPS (pull nového image, restart kontejnerů) a provede health check po nasazení.
Kolik to stojí - odhad nákladů
Co všechno je potřeba vyvinout - rozpis práce
Vývoj zahrnuje návrh struktury projektu a nastavení sdíleného kódu, na backendu HTTP server s middleware pipeline, session management, auth flow, JWT, rate limiter, bot detekci, validaci, persistence nad MongoDB, error handling, graceful shutdown a trasování. Na frontendu stránky, routing, layout, všechny interaktivní komponenty, server actions, cookie management, notifikace, chybové stránky, dynamické přepínání stylů podle tématu a lokalizaci. K tomu unit a E2E testy obou částí včetně testovacích helperů a mocků, a infrastruktura - Dockerfiles, multi-stage build pipeline, CI/CD přes GitHub Actions a deploy na VPS.
Obsazení týmu
Aplikaci tohoto rozsahu zvládne vyvinout jeden senior full-stack vývojář. Při rozdělení práce je ideální tým o dvou lidech - frontend vývojář a backend vývojář, kde jeden z nich zároveň pokryje DevOps (Docker, CI/CD, nasazení). Code review si dělají navzájem. Grafický návrh (design vzhledu) se předpokládá dodaný externě.
Odhad délky vývoje
Pro jednoho seniora je odhadovaná doba přibližně 1 měsíc. Při obsazení dvou vývojářů se doba zkracuje na cca 2 týdny.
Aplikace tohoto rozsahu představuje vývoj v řádu stovek hodin práce zkušeného vývojáře. Výsledná cena závisí na konkrétních požadavcích a složitosti byznys logiky.
Pro orientaci - aplikace srovnatelná s touto případovou studií se typicky pohybuje od 100 000 Kč.
Konkrétní cenovou nabídku připravíme na základě konzultace.
Pokud plánujete práci na vaší webové aplikaci nebo zvažujete ji postavit od nuly, kontaktujte nás. Stavíme spolehlivé a kvalitní nástroje pro vaše podnikání.