Walk through LeoFam
17 of 21 screens are live in the demo. Everything else is visible but marked, with a reason — nothing is a dead link.
How to sign in
The demo has its own login because that is part of the product. These accounts are fictional, the passwords are deliberately fake, and each one sees a different slice of the platform — so it is worth signing in as more than one.
| Role | Password | What they can see | |
|---|---|---|---|
| Administrator | [email protected] | Leofam@Admin | The storefront plus every admin page |
| Customer | [email protected] | Leofam@Shop | The storefront and their own orders. /admin is refused. |
What to try first
- Open any discounted product and follow "Why is this discounted?" — the price lists every rule that reached it, and why each did or did not win.
- Switch the "Winter season 15%" rule off in the admin, then reload a Winter product: the price goes back to list.
- Add something to your bag in a size with only a few left, then try to add more than exist.
- Check out as a guest, then look at your account — the guest order is not there, which is the trade for not needing one.
- Open an old order: it still names the discount each line was given, even for rules that have since ended.
Every screen, and whether it is in the demo
Grouped the way the real platform groups them. A screen marked not in the demo is still visible in the demo's navigation — clicking it explains why and offers a walkthrough, rather than doing nothing.
Sign in
Email and password over the two seeded accounts, with the demo credentials listed below the form.
Shop
The catalogue, filtered by ?category=<id> exactly as the real navbar links to it. The sidebar tree and the masthead categories are the same data rendered twice.
Product
Sizes with their own stock counts, reviews with a computed average, and a link to the price breakdown. A sold-out size is struck through, not hidden.
Why this price
Additive — not a page the real storefront has. Every discount rule that named this product, what each would have charged, and why one won. The rules, dates and resolution order are the product’s own.
Bag
Quantities capped by the stock of the chosen size, with prices re-resolved on every load so a bag never holds a price that has expired.
Checkout
Address, payment method, and the choice to order as a guest. The real app splits address and payment across /checkout and /payment; this folds them into one step.
Order
The status history with timestamps, and the line-by-line record of which discount applied — the reason an old order can still explain its price.
Your account
The customer’s own orders and what they have saved. Guest orders are absent by design: they carry no user reference.
Register
Account creation, at /register in the real app.
Registering hashes a password and sends a confirmation. A browser-only mock has nothing to hash against and nothing to send, and the two seeded accounts already cover both kinds of access.Payment step
The real flow has a separate /payment route after the address step.
Folded into checkout here. No card is processed either way — payment is recorded, not taken — so a second route would add a click without adding anything true.Order notifications
The real app registers a Firebase Cloud Messaging token and pushes order updates to the device, including for guest orders.
Push needs a service worker, a messaging token and a server to send from. The order timeline shows the same status changes a push would announce.Admin dashboard
A grid of labelled tiles, and the only way into the admin pages — the real app has no admin sidebar. Refused entirely for the customer account.
Products
The catalogue at resolved prices, with per-size stock shown as chips so a product missing one size is visible without opening it.
Product form
Fields and per-size stock, matching the real form. Saving is deliberately not wired up and says so, rather than accepting an edit that would live in one tab.
Categories
The tree the storefront navigation is generated from, with the product count beneath each node — which is also how a category discount finds its products.
Orders
Fulfilment in place: move an order forward from the row. Backwards moves are refused and a delivered or cancelled order is final.
Users
Customers and administrators with order counts and spend counted from the orders. One access column, because isAdmin is the whole model.
Discounts
Every rule with its live window, its derived state, and how many products it reaches. Switching one changes the storefront immediately.
New discount
Create a rule, with a preview that runs the real resolver: how many products it reaches, and what the cheapest and dearest of them would become.
Homepage & Posters
Hero slides as records with an order and a switch, plus the featured section’s heading and interval. Switch a slide and the storefront changes.
Add New User
The admin-side user creation form, reached from its own tile on the dashboard.
Same reason as registering: it sets a password and emails the person. The tile is present and explains itself when pressed, because the real dashboard has it.Good to know before you open it
- It runs entirely in your browser. There is no server, and nothing you type leaves the page.
- Your edits persist across a refresh, and Reset data in the demo bar puts the sample data back.
- A guided tour starts on your first visit and can be replayed from the demo bar.
- It works on a phone as well as a desktop.