Hylla: a fictional electronics shop

Hylla is a Norwegian webshop for electronics that doesn't exist. There are no real products, no payments and no real customers. It's a design and development project, built so we can show what a complete e-commerce build looks like, from the homepage all the way to the order screen in the admin.

The challenge

Most portfolio pieces stop at the homepage. That's the part that looks good in a screenshot, but it's rarely where the hard work in an online store is. The hard work is in the category filters, the variant picker, the checkout, and the back office where someone has to pack and ship orders every day.

We wanted a project where anyone could click through the whole flow: browse, search, add to cart, check out, log in and see their orders. And on the other side, open the admin and see how those orders are handled. That meant a real backend, not a static mock-up, and it raised two harder questions: how do you keep a public demo tidy when anyone can change it, and how do you make it feel real without storing anyone's personal data?

Our approach

Design first, page by page

The design started in Figma and was then worked out in Claude Design for every page: homepage, category, product, guide, cart, checkout and the customer account page, plus shared components like the header, mega menu, footer and product cards. Everything is written in Norwegian (bokmål), with prices in whole kroner.

A small stack, in one app

• Next.js 16 with Payload 3. Payload runs inside the Next.js app, so the shop and the CMS share one codebase and one deploy. The admin is in Norwegian too.
• Postgres. With proper migrations in production that run before every build.
• Payload's e-commerce plugin. Products, variants and carts, with Hylla's own fields on top: specs, brands, reviews and buying guides.
• Tailwind CSS v4. Shared design tokens keep pages consistent. The Inter font is self-hosted, so no requests go to Google Fonts.
• Vercel and Neon. Hosting, image storage with Vercel Blob, and a scheduled job for the nightly reset.

An order admin in the spirit of WooCommerce

Instead of inventing a new way to handle orders, we built the back office around a screen many shop owners already know: status tabs with counts, search by order number, name, email or tracking number, and sidebar buttons to start processing, mark as shipped, mark as delivered, put on hold, cancel or refund.

Every save recalculates totals, shipping and VAT, and keeps stock in sync. An order holds stock until it's cancelled or refunded, and changing a quantity or status adjusts stock by the difference. Status changes and stock adjustments are written to an order log automatically, next to your own notes.

A demo that resets itself

Every night at 02:00 UTC, a scheduled job deletes all orders, carts and reviews, restores the catalogue, prices, stock and guides from the seed files, and creates about 40 new fictional orders over the last 30 days. The admin always looks like a shop that's actually running, and the demo never drifts too far from where it started.

No personal data, by design

We set one firm rule early on: Hylla stores no personal data. There's no registration, and visitors log in as a shared demo customer whose details are shown on the login page. Checkout uses generated demo customers, the newsletter form saves nothing, and edits on the account page stay in the browser until you log out. Orders you place still show up on your account page for 24 hours through a signed cookie, so the demo feels real without anything about you reaching the database.

A shared login on a public site also needs hardening. Customers can't edit their own user record, the demo login can't be locked out, the API only shows customers the seeded demo orders, the server decides who owns a cart, and the shop login is kept separate from the admin. Each of these is covered by tests.

The result

Hylla is a working shop with a real backend: products, variants, guides and orders live in Payload and Postgres. The homepage, live search, checkout and the customer account page are built, along with the full order admin. Next up are the category page with filters, the product page with gallery and variant picker, and the guide pages.