A stock dashboard for a clothing shop, built while learning its stack
Modern Fashion Store is a demo for a shop manager: keep the catalogue up to date, see what sells, and watch changes made by other people appear without reloading. It's a portfolio project, so the products, prices and sales are made up.
Where it comes from
-
A take-home task
This started as a take-home assignment in a job application. The brief asked for a manager dashboard in Elixir with the Phoenix framework, Tailwind and PostgreSQL, a stack I had never worked with. I learned Phoenix and LiveView while building it, completed both required tasks and all four optional ones, and deployed it to my own server as a bonus. The point was to show how quickly I can get productive in an unfamiliar stack while keeping the code clean.
-
Upgrade and self-hosting
I brought it up to date with the latest Elixir, Phoenix, LiveView and Tailwind, packaged it as a Docker release, hardened it for public visitors and moved it to my home server, where it runs next to my other demo projects.
The assignment
-
See it: Product dashboard
Task 1: Product dashboard Required
Add, edit and delete products with photo, title, description, category, price and stock, and filter the list.
-
See it: Inventory, transactions and statistics
Task 2: Inventory, transactions and statistics Required
Stock levels, every transaction with a month filter, and the best-selling products.
-
See it: Login
Task 3: Login Optional
Every dashboard page sits behind a login. Registration is closed: the demo uses one shared account.
-
See it: Live feed
Task 4: Live feed Optional
Changes made by one visitor appear for everyone else straight away, using Phoenix PubSub.
-
See it: Tags
Task 5: Tags Optional
Products can carry several tags instead of a single category.
-
See it: Tag filter
Task 6: Tag filter Optional
Filter by any combination of tags, together with the other filters.
Things to try
- Open the dashboard in two browser windows, change a product in one and watch the other update.
- Combine the tag, price and availability filters on the inventory.
- Pick a month on Transactions, then see what sold best on Statistics.
- Add a product of your own, with a photo from Pexels or Unsplash.
How this demo works
- Everyone uses the same demo account.
- All changes are wiped every night at 03:05 (Europe/Bratislava time).
- The account's e-mail and password can't be changed.
- No e-mails are sent.
- Photos can only come from Pexels, Unsplash or the built-in images.
- Please don't enter anything personal.
Built with
- Backend
- Elixir 1.20.4 on Erlang/OTP 29
- Phoenix 1.8.15
- Phoenix LiveView 1.2.12
- Ecto 3.14.0
- Database
- PostgreSQL 18.6
- Frontend
- HEEx templates
- Tailwind CSS 4.3.3
- Heroicons
- Hosting
- Docker (mix release)
- nginx
- Tailscale Funnel
- Bandit 1.12.5 web server
Made by
Ákos Kappel
I build web applications end to end, from the database to the deployment.