Branda V2
A service ordering interface for Branda, a Nigerian branding company, built in 24 hours as a frontend screening task. Customers browse printing, gifts, workspace and digital services, configure an order with a live price, and check out in Nigeria, the US, the UK or Canada, each with its own currency, tax and delivery terms.
- Role
- Solo Developer
- Duration
- 24 hours
- Year
- 2026
- Type
- dev
Problem
Branda sells printing, branded gifts, workspace design and websites, but its current site is built for Nigeria only: naira prices, no hreflang, and a loading screen that hides the page for several seconds on a phone. The brief was a service ordering interface in Next.js that works in four markets, keeps every filter in a shareable URL, and handles the cart, tax and checkout per country, all within 24 hours.
Solution
Each market lives in its own subfolder (/ng, /us, /uk, /ca) with its own currency, tax, delivery threshold, headline and featured services, plus canonical and hreflang links, a sitemap and product structured data so search engines show the right version in each country. The catalogue is server-rendered, with search that matches every word, five categories, filters, sorting and pagination, all kept in the URL. Service pages are built ahead of time for every market and price each option live. The cart is a native <dialog>, the search bar and mobile menu use the popover API, and the market switcher is a plain <select>, so keyboard support and focus handling come from the browser rather than a library. One function calculates every total the drawer, cart page and checkout show, and a small test suite on Node's built-in runner covers discounts, tax, delivery and search. All motion is CSS and respects reduced-motion settings. The layout follows the reference UI Branda supplied. Alongside the build, I reviewed the live branda.com.ng and found, among other things, a syntax error in the page head that stops its Google Ads tag from running.