Modern Fashion Store
Dashboard skladu a predaja pre odevnú firmu so živými aktualizáciami pre každého, kto ho má otvorený.
Živé demoZdrojový kód
Beží na mojom domácom serveri, takže môže byť občas nedostupné (napríklad pri výpadku elektriny alebo internetu).
O projekte
Vznikol v januári 2025 ako zadanie pri pohovore: dashboard skladu pre manažéra obchodu s oblečením v Elixire a Phoenixe, teda v technológiách, ktoré som dovtedy nepoužil. Dokončil som obe povinné úlohy, všetky štyri voliteľné aj bonusové nasadenie.
Neskôr som ho aktualizoval, skontroloval jeho bezpečnosť a spravil z neho verejné demo na vlastnom serveri. Prihlásite sa tlačidlom „Try the demo“ a dáta sa každú noc obnovia.
Čo si môžete vyskúšať
- Pridávanie, úprava a mazanie produktov s fotkami, cenami, zásobami a viacerými štítkami
- Kombinácia filtrov podľa štítkov, ceny a dostupnosti, vyhľadávanie a triedenie; filtre ostávajú v URL
- Otvorte dashboard v dvoch oknách a sledujte, ako sa zmeny hneď objavia v druhom
- Transakcie po mesiacoch s výberom mesiaca a stránkovaním
- Štatistiky: porovnanie s minulým mesiacom, graf tržieb za 12 mesiacov, tržby podľa kategórií a tri najpredávanejšie produkty
- Grafy sa dajú prepnúť na tabuľku pre čítačky obrazovky
- Veľkosti a farby s vlastnými zásobami a zľavy naplánované na obdobie so značkou výpredaja a históriou cien
- História úprav s verziami, ktoré sa dajú obnoviť, a možnosť vrátiť zmazaný produkt ešte niekoľko minút
- Prehľad aktivity s úpravami, doplneniami zásob a predajmi; simulovaný zákazník každých pár minút niečo kúpi
- Počet ľudí online a upozornenie, keď ten istý produkt práve upravuje niekto iný
- Import z CSV, ktorý skontroluje každý riadok skôr, než niečo uloží, a export skladu aj transakcií do CSV
- Štítok na regál s QR kódom pre každý produkt
- Príkazová paleta cez Ctrl+K, tmavý režim, angličtina, nemčina a slovenčina a inštalácia ako aplikácia
Hlavné body
- Živé aktualizácie medzi používateľmi cez Phoenix PubSub
- Filtre skladu a transakcií, štatistiky predaja
- Prihlásenie do dema bez zdieľaného hesla, nočný reset dát
- Na vlastnom serveri s Dockerom, nginx a Tailscale
Ako to funguje
- Asi 320 testov v 46 súboroch; kontrola pred commitom spúšťa kompilátor s varovaniami ako chybami, Credo, bezpečnostný skener Sobelow a testy
- GitHub Actions spúšťa aj Dialyzer, zostaví release image, preskenuje ho nástrojom Trivy a nahrá do GHCR; server tento image len stiahne a spustí
- Obmedzený počet zapisovacích požiadaviek v nginx, atomický limit počtu produktov, Erlang distribúcia viazaná na localhost a voliteľná databázová rola bez práv superusera
- Bezpečnostná kontrola: prísna Content Security Policy, povolené zdroje fotiek, limity WebSocket správ a vstupov, prihlásenie do dema na serveri s ochranou CSRF
- Zostavený ako release vo viacstupňovom Docker image, za nginx s bezpečnostnými hlavičkami a limitmi požiadaviek, zverejnený cez Tailscale Funnel sidecar s kontrolou stavu
- View Transitions, oznamy pre čítačky obrazovky pri živých zmenách a podpora obmedzeného pohybu
Architektúra
- 1PrehliadačStránky sa menia naživo cez WebSocket LiveView
- 2Tailscale FunnelVerejné HTTPS zo sidecar kontajnera
- 3nginxBezpečnostné hlavičky a obmedzenie počtu požiadaviek
- 4Phoenix LiveViewElixir release; PubSub posiela každú zmenu všetkým otvoreným stránkam
- 5PostgreSQLProdukty, zásoby a predaje
Zoznam zmien
- Phoenix 1.7 na 1.8 a LiveView 1.0 na 1.2
- Tailwind CSS 3 na 4
- Odstránené nepoužívané knižnice
- Demo dáta narástli z 10 na 34 produktov s vlastnými fotkami a rokom predajov
- Kedy
- 2025 – 2026
- Typ
- Osobný
- Verzie
- Elixir 1.20
- Phoenix 1.8
- LiveView 1.2
- PostgreSQL 18
- Tailwind CSS 4
- Technológie
- Elixir
- Phoenix LiveView
- PostgreSQL
- Tailwind CSS
- Docker
- nginx
- Tailscale
Galéria
