Mawjat

Mawjat – E-commerce Storefront for a Bucket-Hat Brand

A fast, mobile-first online store for an Alexandria bucket-hat brand: catalogue, filters, cart, and a 3-step checkout, built with plain HTML, CSS and JavaScript.

Mawjat is a complete e-commerce front end for an Alexandria-based bucket-hat label aimed at Gen Z shoppers. I designed and built it from scratch around a coastal, editorial look: sea-and-sand colours, elegant serif headlines, and illustrated product shots.

What the store does:

Home page with a hero section, featured products, collections, brand story, reviews and newsletter signup

Shop page with filters (collection, colour, size), live search and sorting. The chosen filters are kept in the URL, so a filtered view can be shared as a link

Product pages with colour and size options and an image gallery

Quick-view pop-up so shoppers can add to bag without leaving the shop page

Shopping bag and wishlist that stay saved after the page is refreshed

3-step checkout with discount codes, form validation and card-number checking

One-click switch between EGP and USD, and light/dark mode

How it's built:

No frameworks, no build step, very fast to load

Every product image is drawn in code (SVG), so the whole site is about 310 KB and stays sharp on any screen

Designed for phones first, then scaled up to desktop

Accessible: full keyboard navigation, screen-reader labels, and animations switch off for users who turn motion off

Tech: HTML5, CSS3, JavaScript, SVG, LocalStorage, Vercel

Tags: E-commerce, Web Design, Front-End Development, Responsive Design, UI/UX, Online Store