Dekoras
A building-materials supplier online — browse certified brands, request a price, and track the order through to delivery.
Overview
Dekoras sells construction materials: structural steel, reinforcement, finishing products. The site carries the catalogue, the network of certified brands behind it, the projects the company has supplied, and a careers section.
The part that makes it different from a normal shop is pricing. Materials are often quoted rather than listed, so a customer can ask for a price and follow the request the same way they'd follow an order.
The problem
Buying construction materials runs on quotes, phone calls and messages. That works until you need to know what was agreed, what stage an order is at, or what a supplier actually stocks — at which point it's spread across a dozen conversations.
What I built
One place for both ways of buying: straightforward items go in a cart, everything else goes through a price request that both sides can see the state of. Around it sits the catalogue, the brand network, past projects and a careers section, so the site does the company's whole public job rather than just taking orders.
Tech stack
- Built with
- Web storefront, Admin dashboard, API
Key features
Finding a material
Categories on the way in, then a sidebar that narrows by subcategory and by brand. The count sits in the heading and the results are paged rather than endless, because someone sourcing for a job wants to know how much is left to look through.
Categories are the way in — pick one before anything else.
1/3
Everything about a product in one place
Gallery, product code, which category it belongs to, how many come per box, and the unit you are buying in. Overview, specifications and packaging sit behind tabs underneath — detail for the people who need it, out of the way for the people who don't.
A product page: gallery, product code, category, units per box, and the quantity you want. Specifications sit behind a tab, so the detail is there without pushing the button off the screen. Ask for a price, then track it
Materials that aren't listed at a fixed price go through a request instead of a phone call — and it can be withdrawn, with the state visible to both sides rather than left hanging.
Price request — an answered quote, waiting to be confirmed or rejected From cart to quote to order
The cart is explicit that prices come back as a quote, not a total. Submitting turns it into a request; the orders list shows each one moving through offered, pending and completed, and the detail page carries the priced answer once it lands.
The cart says plainly that prices come back as a quote, not a total.
1/3
Collect it or have it delivered
Both routes are handled at checkout — a showroom to collect from, or a saved address to ship to. An order can be rejected as well as accepted, with a reason attached.
Checkout, collecting from a showroom — pick a date, pick a branch. The same checkout set to delivery, with saved addresses. The brands behind the materials
A directory of certified suppliers with what each one specialises in, so a buyer can judge whether the material is right before asking about it.
Brands — the directory of certified suppliers Projects as proof
Completed work is part of the site, filterable by city. Each project lists the materials that went into it — brand, product, quantity, unit — and where it was built, which turns the portfolio into a second way into the catalogue.
Projects, filterable by city, each card showing the brands used. A project lists every material that went into it — brand, product, quantity, unit — and where it was built. Writing that does a job
The blog is searchable and filtered by category and tag, and an article ends on the products it talks about. It is there to bring people in who are searching for the problem rather than the product.
The blog index: search, categories, tags and sort. An article, with its tags, a view count and a share action. An account that does more than orders
Profile, order history, a wishlist — and job applications, since the site carries the company's hiring too.
The account menu: profile, orders, wishlist, job applications, settings.
1/4
Getting in without friction
Sign-up, email verification, a one-time code with a countdown, and password recovery. The screen worth pointing at is the one for an expired link: instead of a dead end, it explains what happened and offers to send a new one.
Signing up — verification sent, the link expired, and the one-time code A whole site, not just a shop
Careers, about and FAQs sit alongside the catalogue — the site does the company's whole public job, not only the selling part.
Careers: open roles, filterable by department and city. FAQs, with a route to a person when the answer isn't there. Built for every screen
The catalogue runs from power tools and adhesives to structural materials, and reflows from desktop down to a phone without a separate build.
Products — the catalogue, here on a narrow screen A second theme, not an inverted one
Dark mode was designed as its own pass rather than flipped automatically — a dedicated page in the file works through the home page, authentication and project screens, so contrast and the orange accent still hold up.
Dark mode — the same home page, worked through as a second theme