Automatizace

Funkční fakturační systém za pár hodin ? (vibe coding v praxi)

Funkční fakturační systém za pár hodin ? (vibe coding v praxi)

Jak jsem za pár hodin postavil vlastní fakturační systém

Fakturace. Nutné zlo každého freelancera. Jednoho dne jsem si řekl: co kdybych si to napsal sám? Ne proto, že umím programovat — ale proto, že mám Claude.

Co je vibe coding?

Vibe coding je přístup, kdy počítači nediktujete každý technický detail, ale popisujete záměr. Nepíšete kód řádek po řádku — říkáte, co má aplikace dělat, jak se má chovat a jak má vypadat. AI (v mém případě Claude) to překládá do funkčního kódu. Vy držíte směr.

Je to jako mít seniorního vývojáře na telefonu 24/7. Neunaví se, neodsekává a nezačne po třetí iteraci tvrdit, že „to nejde“.

Co jsem postavil

PromptLab Fakturace je plnohodnotný fakturační systém — webová aplikace běžící lokálně na mém počítači. Žádné předplatné, žádný cloud, žádné předávání dat třetí straně.

Faktury

  • Vytvoření faktury za cca 30 sekund (klient, položky, splatnost)
  • Automatické číslování ve formátu FV-2026-0001
  • PDF jedním klikem včetně QR platebního kódu a podpisu
  • Odeslání faktury e-mailem přímo z aplikace
  • Stavy: Koncept → Vystavená → Zaplacená (případně Po splatnosti)

Klienti

  • Databáze odběratelů s adresami, IČO a DIČ
  • Napojení na ARES: zadám IČO a aplikace sama doplní název firmy, adresu i DIČ

Statistiky a přehledy

  • Přehled fakturace po měsících, kvartálech a roce
  • Rychlý přehled pohledávek (kdo dluží a kolik)
  • Grafické zobrazení výnosů

Technické zázemí

Kód jsem nepsal ručně, ale chci vědět, na čem to běží:

  • Frontend: Next.js 16 + React 19 + Tailwind CSS 4
  • Backend: Node.js + Express 5 + TypeScript
  • Databáze: SQLite přes Prisma ORM
  • PDF: pdfkit
  • E-mail: nodemailer
  • Grafy: Recharts
  • Validace: Zod
  • ARES API: ares.gov.cz
  • QR platba: generování dle CZ QR/SPD standardu

Frontend a backend komunikují přes REST API. Data zůstávají lokálně v SQLite souboru. Žádný hosting, žádný externí server, minimum compliance stresu.

Jak vypadal proces

Nezačal jsem architekturou ani databázovým schématem. Začal jsem větou:

„Chci fakturační aplikaci inspirovanou běžnými programy. Tmavý design, zelený navbar, základní CRUD pro faktury a klienty.“

Claude navrhl strukturu, já odsouhlasil směr. Pak jsem iteroval:

  • „Přidej napojení na ARES — po IČO automaticky doplň firmu.“
  • „Generuj PDF s QR platebním kódem.“
  • „Chci statistiky — bar chart výnosů po měsících.“
  • „Předělej design do stylu PromptLabu: tmavý, cyan, fialová.“

Každý krok trval minuty, ne dny. Moje práce nebylo psát syntaxi, ale rozhodovat o funkcích, prioritách a výsledném UX.

Co mě překvapilo

ARES integrace byla triviální. Jeden endpoint, jeden JSON, hotovo.

QR platba fungovala okamžitě. Standard je jasně popsaný a AI ho uměla správně poskládat.

Design je hlavně o popisu. Ukázal jsem vizuální směr a během pár minut měla appka nový kabát.

Co vibe coding není

Není to magie „řekni a hotovo“. Musíte vědět, co chcete. Čím přesněji popíšete výsledek, tím lepší kód dostanete.

A zároveň je dobré rozumět základu toho, co vzniká. Ne proto, abyste to psali sami — ale abyste poznali, že to dává smysl a je to bezpečné.

Závěr

Celý projekt — backend, frontend, databáze, PDF, e-mail, ARES integrace i redesign — vznikl vibe codingem. Bez nocí nad dokumentací a bez klasického „copy-paste debuggingu“.

Mám aplikaci přesně podle svých potřeb. Bez předplatného. S daty na vlastním disku. Tohle je vibe coding v praxi.

← Zpět na tutoriály