Cieľom projektu bolo vytvoriť stránku na jednoduché objednanie kytice v rámci regiónu, či už na vyzdvihnutie na predajni, alebo ako donášku/prekvapenie vybranej osobe...
kvetyjanka.sk
Update: 11. 12. 2025
kvetyjanka.sk/ - Lokálny e-shop, zameraný hlavne na donášku kytíc a doplnkov po okolí z dvoch pobočiek...
🎯 Úvod / Cieľ projektu
🛠️ Použité technológie
Projekt KvetyJanka je postavený na modernom a výkonnom technologickom stacku založenom na platforme .NET 9 MVC. Backend je optimalizovaný pomocou Dapper ORM pre rýchle a priamočiare SQL dotazy bez zbytočného overheadu. Na frontende je použitý Bootstrap 5 s podporou vlastných CSS tried, pričom sa kladie dôraz na responzivitu a tmavý/svetlý režim pomocou var() premenných. Web je kompletne bez CMS, čo umožňuje plnú kontrolu nad výkonom a architektúrou.
Použité technológie:
-
ASP.NET Core 9 (MVC)
-
Dapper ORM
-
SQL Server
-
Bootstrap 5
-
Swiper.js (slider)
-
ImageSharp (optimalizácia obrázkov)
-
GoPay API (platby)
-
Razor Views + Partial Views
-
SMTP (Active24)
-
Session + Cookie-based authentication
📦 Funkcie
Aplikácia obsahuje plne funkčný e-shop s administráciou (admin, admin-editor), bez použitia CMS. Zákazníci môžu:
-
prehliadať produkty podľa kategórií,
-
vybrať spôsob doručenia (donáška / osobný odber),
-
zaplatiť cez GoPay (kartou, GPay, Apple Pay),
-
získať faktúru vo formáte PDF po zaplatení,
-
sledovať svoje objednávky a históriu.
Administrátor -editor má možnosť:
-
spravovať produkty (pridávanie, úprava, obrázky, soft delete),
-
upravovať obrázky galérie a predajní,
-
nastavovať PSČ pre donášku podľa predajne,
Administrátor má možnosť kompletnej správy:
-
zákazníkov
-
podrobnosti o firme
-
znenie statických stránok
-
spravovať údaje o pobočkách
-
upravovať e-mailové šablóny a doručovacie kontakty.
- exportovať objednávky do CSV/XLSX,
⚙️ Technické riešenia
Projekt bol vytvorený bez CMS, so zameraním na maximálnu kontrolu nad backendom aj frontendom.
Kľúčové technické riešenia:
-
upload obrázkov prebieha dočasne do
/uploads/tmp/, pred uložením do/products,/galleryatď. -
navigator.sendBeacon()sa používa na cleanup pri odchode z neuloženého formulára, -
alerts.jscentralizuje notifikácie (úspech/chyba), -
GoPay integrácia je cez REST API so sandbox režimom a plnou validáciou,
-
faktúry sa generujú oneskorene po potvrdení platby (
InvoiceGenerator), -
cron joby zabezpečujú vypršanie nezaplatených objednávok a mazanie dočasných obrázkov.
🚀 Optimalizácie výkonu
Projekt obsahuje viacero technických optimalizácií:
-
statické súbory (CSS, JS, obrázky) sú cachované cez
Cache-Control, -
slider komponenty sú načítavané oneskorene (
requestIdleCallback,defer), -
obrázky sa konvertujú do
.webp+ thumb verzia (nižšia LCP, vyššie SEO skóre), -
Facebook widget sa načítava asynchrónne mimo hlavnej cesty renderu,
-
zložitejšie partial views (napr. produktový slider) sú načítavané oddelene.
🧩 Výzvy a riešenia
1. Automatický cleanup dočasných súborov:
→ Riešené cez navigator.sendBeacon() + backend UploadCleanupController.
2. Spoľahlivá GoPay integrácia s testovacím aj produkčným režimom:
→ Oddelené nastavenia podľa StoreId, detailná logika po návrate (Notify), podpora Apple Pay a GPay.
3. Nahrávanie obrázkov z mobilu (galéria vs. foťák):
→ Dva <input type="file"> s capture, prepínané podľa potreby.
4. SEO optimalizácia bez CMS:
→ Ručne nastavené meta tagy, Open Graph, sitemap.xml, robots.txt, schema.org pre produkty.
5. Trvalé prihlásenie + session obnova po odhlásení:
→ Po logoute sa SessionId zachová, cookie UserId umožňuje návrat bez straty údajov.
6. Nezávislý slider pre produkty a galériu bez trhania:
→ Vlastné CSS, oddelené triedy home-gallery-*, product-slider-*, Swiper.js s optimalizáciou pre mobilné zariadenia.