Back to portfolio
Top Doučko

Comprehensive education platform with e-commerce and dashboard

About the project

Comprehensive web application for education service Top Doučko covering e-commerce (Stripe Checkout, subscription management, invoicing), user & student management, AI chatbot SvišťBuddy, GPT-4o worksheet generator, email notifications plus logging & monitoring. Includes an operations dashboard in Next.js 16 (React 19, Tailwind 4, Firebase) for tasks, students, calendar, storage, communication and project planning, plus a premium parent zone with full education and billing overview.

Result

Automated flow from order to subscription activation, scalable architecture ready for growth and premium parent zone for maximum transparency.

Přehled projektu

Top Doučko je komplexní vzdělávací platforma skládající se ze tří hlavních částí: veřejného webu s e-commerce, operačního dashboardu pro správu firmy a prémiové rodičovské zóny.

🌐

Veřejný web

E-commerce platforma s platebním systémem Stripe, správou předplatného, AI chatbotem a generátorem pracovních listů.

  • Nákupní proces balíčků služeb
  • Stripe platební integrace
  • AI chatbot SvišťBuddy
  • Generátor pracovních listů
📊

Operační Dashboard

Next.js 16 aplikace s Firebase pro správu úkolů, žáků, kalendáře, souborů a komunikace. Funguje také jako mobilní aplikace.

  • Správa úkolů s AI asistencí
  • Správa žáků a lekcí
  • Kalendář a cloud storage
  • Real-time komunikace
👨‍👩‍👧‍👦

Rodičovská zóna

Prémiová sekce pro rodiče s kompletním přehledem vzdělávání dětí, správou předplatného a fakturace.

  • Správa více studentů
  • Přehled zbývajících hodin
  • Historie lekcí a statistiky
  • Kompletní fakturace

1. Veřejný web a E-commerce platforma

Kompletní vzdělávací platforma s pokročilým e-commerce systémem, platební integrací Stripe, správou předplatného, fakturačním systémem a AI funkcemi. Backend v PHP 7.4+ s MySQL databází.

Moderní landing page

Profesionální responzivní web s přehlednou prezentací služeb, ceníkem a informacemi o doučování. Optimalizováno pro všechna zařízení s moderním designem a intuitivní navigací.

  • Responzivní design pro všechna zařízení
  • Interaktivní ceník s různými balíčky
  • Reference a statistiky úspěchů
  • Novinky a blog sekce
Landing page Top Doučko
Interaktivní ceník Top Doučko

Interaktivní ceník

Dynamický ceník s různými balíčky služeb, možností přidání více žáků do jedné objednávky a automatickým přepočtem cen. Komplexní formulář s validací na frontendu i backendu.

  • Multi-student podpora v jedné objednávce
  • Dynamické výpočty cen v reálném čase
  • Komplexní validace formulářů
  • Touch-friendly prvky pro mobilní zařízení

Klíčové funkce e-commerce systému

🛒

Nákupní proces

Multi-student podpora, dynamické výpočty cen, komplexní validace formulářů

💳

Stripe integrace

Bezpečná platební brána s webhook handlingem a automatickým zpracováním plateb

🔄

Subscription systém

Flexibilní plány s trial period (7 dní), automatickým obnovováním a správou statusů

📄

Fakturační systém

Automatické generování HTML faktur, PDF export přes Stripe a kompletní historie plateb

📧

Email notifikace

Automatické HTML emaily: potvrzení objednávky, aktivace předplatného, faktury

👥

Správa uživatelů

Registrace rodičů, správa studentů, automatické generování hesel, adresní systém

🗄️

Databázová architektura

Normalizovaná struktura, migrations, indexy, foreign keys, database views

🔒

Bezpečnost

SQL injection prevention, input validation, CSRF protection, password hashing

2. Operační Dashboard

Unifikovaný dashboard postavený na Next.js 16 (App Router) s Reactem 19, TypeScriptem 5, Tailwind CSS 4 a Firebase. Aplikace funguje také jako mobilní aplikace s PWA podporou a real-time synchronizací všech dat.

Správa úkolů a žáků

Komplexní systém pro správu úkolů s AI asistencí pro kategorizaci a prioritizaci. Dashboard zvýrazňuje čekající vs. rozpracované úkoly, tabulka úkolů nabízí fulltext, filtry a mobilní karty. Detail úkolu obsahuje chat, notifikace, sdílené soubory i přehled aktivity.

Správa žáků kombinuje historii lekcí, poznámky lektora, přehled plateb a zbylých hodin. Vše běží na Firestore onSnapshot subscriptions s real-time synchronizací.

  • AI kategorizace úkolů pomocí GPT-4o
  • Real-time synchronizace přes Firebase
  • AI přepis lektorských poznámek pro rodiče
  • Filtrování, fulltext a mobilní optimalizace
Dashboard - správa žáků
Dashboard - cloud storage a kalendář

Kalendář a sdílené úložiště

Pokročilý kalendář s přepínáním mezi týdny a měsíci, slučování firemních eventů s lekcemi a rychlé blokace slotů. Dialog pro události řeší komplet CRUD s validací a role-based přístupem.

StorageBrowser ukazuje hierarchii složek, živé přenosy změn, preview obrázků, resumable uploady a dávkové notifikace. Filtrování podle typu souboru, klávesové zkratky a granularita práv stojí na Firebase Storage.

  • Kalendář s firemními eventy a lekcemi, role-based přístup
  • Cloud storage s real-time synchronizací přes Firebase
  • Preview obrázků, resumable uploady a dávkové notifikace
  • Granulární práva, klávesové zkratky a filtrování

Komunikace a sociální vrstva

Slack-like kanály, soukromé zprávy a role-based rooms. Kompletní chat systém s real-time aktualizacemi.

KanályDMRole-based

Notifikace a mobilní aplikace

Push notifikace přes FCM a e-mailové notifikace podle preferencí. Dashboard funguje také jako mobilní aplikace s PWA podporou.

Push notifikaceE-mailPWA

Klíčové moduly dashboardu

TasksCard a TasksTable s fulltextem, filtry a mobilními kartami

TaskChat s notifikacemi, sdílenými soubory a přehledem aktivity

AI endpoint /api/ai/categorize-task pro návrh kategorií a priorit

StudentsTable se zbytkem hodin, filtry podle stavu objednávky a rychlými akcemi

Detail žáka s historií lekcí, poznámkami lektora a přehledem plateb

AI endpoint /api/ai/rewrite-lesson-notes pro přepis poznámek

Kalendář s přepínáním týdnů/měsíců a rychlým blokováním slotů

StorageBrowser s hierarchií složek, preview, resumable uploady a dávkovými notifikacemi

Social kanály, GlobalChat, DirectMessages a role-based private rooms

API /api/notifications/send pro FCM push a e-mailové notifikace

VisionBoard pro dlouhodobé iniciativy s filtry a timeline

Multi-project navigace v Sidebaru a role-based gating přes AuthContext

3. Rodičovská zóna (TopPřehled)

Prémiová funkce integrovaná do veřejného webu, která poskytuje rodičům s aktivním předplatným kompletní kontrolu a transparentní přehled o vzdělávání jejich dětí.

Kompletní přehled vzdělávání

Rodiče mohou spravovat více dětí z jednoho účtu. Intuitivní přepínač umožňuje okamžité přepínání mezi studenty, každý má vlastní statistiky, přehled využitých hodin i historii lekcí.

  • Správa více studentů na jednom účtu
  • Progress bar zbývajících hodin
  • Detailní informace o žákovi a statistiky
  • Seznam absolvovaných lekcí s filtrováním
Rodičovská zóna Top Doučko

Správa předplatného

Přehled typů předplatného, platnosti, měsíčních poplatků a možnost zrušení či obnovení. Upozornění na nevyužité hodiny při zrušení.

  • Aktuální stav předplatného
  • Zrušení nebo obnovení v několika krocích
  • Upozornění na nevyužité hodiny

Fakturace a statistiky

Přehled všech faktur s detaily, možnost stažení PDF, statistiky plateb a přehled zakoupených lekcí a konzultací. Vhodné i pro daňové účely.

  • Historie všech faktur s detaily
  • Stažení faktur v PDF formátu
  • Statistiky výdajů na vzdělávání

Technologický stack

Moderní technologie pro škálovatelnou a spolehlivou platformu.

Backend

  • PHP 7.4+
  • MySQL
  • Stripe PHP SDK
  • PHPMailer
  • MVC pattern

Frontend & Dashboard

  • Next.js 16 (App Router)
  • React 19
  • TypeScript 5
  • Tailwind CSS 4
  • Firebase

Externí služby

  • Stripe
  • OpenAI GPT-3.5 / GPT-4o
  • Firebase Cloud Messaging
  • Google Fonts

Have a similar project?

Contact me and we'll discuss how I can help your business too.

Contact me
Robin Ustohal - Portfolio