Modern Fashion Store
Dashboard skladu a predaja pre odevnú firmu so živými aktualizáciami pre každého, kto ho má otvorený.
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
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 240 testov v 32 súboroch; kontrola pred commitom spúšťa kompilátor s varovaniami ako chybami, Credo, bezpečnostný skener Sobelow a testy
- 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 24 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
