Skip to content
Ákos Kappel
Language: en
Theme
Light
Dark

Modern Fashion Store

Inventory and sales dashboard for a clothing company, with live updates for everyone who has it open.

Live demoSource code
Product dashboard of the Modern Fashion Store with product photos, prices and stock

About the project

It started in January 2025 as a take-home task in a job application: a stock dashboard for the manager of a clothing shop, in Elixir and Phoenix, a stack I had never used before. I finished both required tasks, all four optional ones and a bonus deployment.

Later I upgraded it, reviewed its security and turned it into a public demo on my own server. Press "Try the demo" to log in; the data resets every night.

What you can try

  • Create, edit and delete products with photos, prices, stock and several tags
  • Combine filters by tags, price range and availability, search and sort; the filters stay in the URL
  • Open the dashboard in two windows and watch changes appear live in the other one
  • Transactions grouped by month with a month picker and pagination
  • Statistics: this month compared with last month, a 12-month revenue chart, revenue by category and the top three bestsellers
  • Charts can be switched to a table for screen readers

Highlights

  • Live updates between users with Phoenix PubSub
  • Filters for inventory and transactions, bestseller statistics
  • Demo login without a shared password, nightly data reset
  • Self-hosted with Docker, nginx and Tailscale

Under the hood

  • About 240 tests in 32 test files; a pre-commit check runs the compiler with warnings as errors, Credo, the Sobelow security scanner and the tests
  • Security review: strict Content Security Policy, an allowlist for photo hosts, limits on WebSocket messages and inputs, server-side demo login with CSRF protection
  • Built as a release in a multi-stage Docker image, behind nginx with security headers and rate limits, published through a Tailscale Funnel sidecar with health checks
  • View Transitions, screen reader announcements for live changes and support for reduced motion

Architecture

  1. 1BrowserPages update live over a LiveView WebSocket
  2. 2Tailscale FunnelPublic HTTPS from a sidecar container
  3. 3nginxSecurity headers and rate limits
  4. 4Phoenix LiveViewElixir release; PubSub sends every change to all open pages
  5. 5PostgreSQLProducts, stock and sales

Changelog

  • Phoenix 1.7 to 1.8 and LiveView 1.0 to 1.2
  • Tailwind CSS 3 to 4
  • Unused libraries removed
  • Demo data grew from 10 to 24 products with local photos and a year of sales
When
2025 – 2026
Type
Personal
Versions
  • Elixir 1.20
  • Phoenix 1.8
  • LiveView 1.2
  • PostgreSQL 18
  • Tailwind CSS 4
Stack
  • Elixir
  • Phoenix LiveView
  • PostgreSQL
  • Tailwind CSS
  • Docker
  • nginx
  • Tailscale

Gallery

Inventory table with filters, product photos, categories, prices and stock
Inventory: search, filters by category, price, tags and stock, sorting, editing and deleting.
Sales statistics with monthly revenue bars and a revenue-by-category donut chart
Statistics: revenue per month and per category, stock warnings and bestsellers.

1 of 2

Inventory table with filters, product photos, categories, prices and stock

Inventory: search, filters by category, price, tags and stock, sorting, editing and deleting.