KAVON
An online store for a bold streetwear brand.
I designed and built KAVON's online store, bringing its bold streetwear identity into the shopping experience. My work covered the customer website, admin tools, and the connections between products, checkout, and orders.
KAVON storefront — homepage with hero banner, navigation bar and featured collections.
What the project needed
The goal was to give KAVON a strong online presence while keeping product selection, delivery costs and checkout easy to understand. The store also needed tools to manage products and orders behind the scenes.
I designed the interfaces, built the customer-facing Next.js storefront, implemented the admin dashboard, and connected both to a shared Express API backed by MongoDB. The API handles price validation, stock checks, discount application and order total verification so the numbers customers see are always accurate.
Three decisions that shaped the experience
Shop page — category filters, price range slider, and sort controls narrow a full catalogue of streetwear products.
A — Finding the right product
The catalog page combines a persistent left-side filter panel with a responsive product grid. Customers can narrow results by category (Oversized, Hoodies, T-Shirts, and more), apply a price range and choose a sort order — newest, price ascending or descending, or best sellers. The active filter state is reflected in the URL so results can be bookmarked or shared.
Product page — colour, size, stock and delivery information sit directly above the purchase action.
B — Making product choices clearer
On the product page, colour swatches, size buttons and a per-size availability indicator appear before the Add to Cart action. When a size is low in stock the page surfaces that information immediately. Delivery eligibility and an estimated timeframe sit just below the price, so customers know what to expect before committing.
C — Knowing what is in the order
The cart shows each selected variant — product name, chosen size, quantity controls — alongside the order summary: line totals, an estimated shipping cost and any active discount. The server recalculates prices, stock, discounts, shipping and the final total when checkout begins, so what customers see in the cart is confirmed rather than assumed.
Cart — variant details and the running total are visible before checkout begins.
Behind the storefront
I also built the tools behind the storefront, so products, stock and orders could be managed through the same platform. The admin dashboard is a separate protected Next.js application that connects to the same API.
Products & stock
Add products with multiple colour and size variants. Stock counts per size are updated as orders are placed.
Promotions & collections
Create and schedule discount codes, mark items as new drops or best sellers, and group products into named collections.
Orders & fulfilment
View incoming orders, update delivery status, and review order details including verified totals from the API.
- Customer storefront
- Next.js · React · Tailwind CSS
- Admin dashboard
- Next.js · Protected routes · Role-based access
- API
- Node.js · Express · TypeScript
- Database
- MongoDB · Mongoose
- Media
- Cloudinary (image hosting & optimisation)
- Design & prototyping
- Figma
- Deployment
- Vercel (storefront) · Vercel (admin)
Stack verified against the public repository at the time of writing.
What I built, and what comes next
The project connects a responsive storefront, customer accounts, an authenticated checkout flow and store management in one platform. It shows how I bring interface design and development together across the customer and admin experience.
Next, I'd focus on clearer product photography and testing the full order journey end to end — from account verification through to delivery status updates. Card payments are currently marked as coming soon in the checkout; that would be the natural next implementation step.
Have a project in mind?
I'm currently open for new opportunities in UI/UX design and frontend development.