Barkat Ali Jewellers

A premium jewellery e-commerce platform where every product's price is computed live from the day's gold and platinum rate. Built end to end: storefront, API, and admin.

Next.js 14
React
TypeScript
Tailwind CSS
shadcn/ui
Node.js
Express.js
MongoDB
Mongoose
JWT
Cloudinary
Docker
CCAvenue
Barkat Ali Jewellers
Preview 1
Preview 2
Preview 3
Preview 4
+7

View Gallery

11 Images

Duration

2026

Team Size

Solo — storefront, API & admin

My Role

Full Stack Engineer

Project Overview

Key Highlights

Duration: 2026
Team Size: Solo — storefront, API & admin
My Role: Full Stack Engineer
Status: Completed

Barkat Ali Jewellers is a premium jewellery e-commerce platform I built end to end, a customer storefront, a REST API, and an admin dashboard. Unlike a normal shop, jewellery prices move with the market, so nothing is priced statically: every product's price is calculated in real time from the current metal rate, weight, karat, and making charges.

Key Features:

1. Live Gold-Rate Engine - Fetches live gold, platinum, and silver rates from a metal-rate provider, with automatic failover to a backup provider. - Converts USD to PKR through a separately cached currency leg. - Persists each day's rate as a snapshot in the database, keyed to the Asia/Karachi business day, so the price everyone sees stays consistent through the day. - Serves a pulsing "live rate" card on the storefront that re-checks every few minutes.

2. Dynamic, Rate-Based Pricing - Products store no fixed price. Every listing and detail response computes weight x per-gram metal rate + making charges on the fly. - Karat-aware (18k / 21k / 22k / 24k) with troy-ounce conversion for platinum and silver. - Backend and frontend compute prices identically, so what the customer sees always matches the server. - Offers and discounts (percentage or fixed) layer on top of the live price.

3. Product Catalog & Storefront - Product listing with search, category, price-range, rating, and sort filters, plus pagination. - Rich product detail pages with image galleries, reviews and ratings, and related products. - Curated homepage sections (for example "Bridal Picks") driven by a featured-layout builder. - Category carousels, a hero carousel, an occasion strip, and trust badges.

4. Admin Dashboard - Full product management: create, edit, duplicate, activate or deactivate, with metal type, karat, weight, making charges, offers, and 2 to 5 image galleries. - Category, tag, banner, and coupon management, with scheduled banner display windows. - A drag-and-drop featured-homepage builder to curate what shows on the storefront. - Analytics: order timeline, conversion, and product and inventory stats.

5. Cart, Checkout & Orders - Client-side cart with a slide-out drawer; prices snapshot at add-to-cart time. - Checkout with a full order lifecycle (placed, processing, shipped, delivered, cancelled). - CCAvenue payment gateway integration, plus cash-on-delivery and bank transfer. - Order line items freeze base and final price with a snapshot of weight, karat, and metal type, so historical orders stay accurate even as rates move.

6. Authentication & Accounts - JWT auth with role-based access (customer and admin). - Email-verification flow on signup and secure password reset. - Protected routes, profile management, and order history.

7. Media Pipeline - Uploads are compressed with sharp and streamed to Cloudinary, keeping the storefront fast. - Image type and size validation on the way in.

8. Premium Design & Dark Mode - High-end look with Playfair Display serif headings, tasteful spacing, and scroll-reveal animations. - Full class-based dark mode across the storefront. - Fully responsive, with mobile-specific banners and menus. - A floating WhatsApp button for direct customer contact.

9. SEO & Performance - Rich metadata: OpenGraph and Twitter cards, canonical URLs, and locale alternates. - Built for speed with the Next.js App Router, image optimization, and cached rates.

10. Deployment & Infrastructure - Built for production at barkatalijewellers.com: storefront on Vercel, a Dockerized Node/Express API running under PM2, MongoDB, and Cloudinary media.

Challenges
  • Jewellery prices must track live gold and platinum rates, but the paid rate provider bills multiple API calls per refresh against a small monthly quota
  • Products can't carry a fixed price when the underlying metal rate changes daily
  • A slow or failed rate provider must never take down the storefront
  • Non-technical shop owners need to manage a full catalog, offers, and the homepage without touching code
  • Delivering the high-end, premium feel expected of a luxury jewellery brand, in both light and dark mode
Solutions
  • Built a layered rate cache: one live fetch per day, persisted as a database snapshot keyed to the Asia/Karachi day, with an in-memory layer on top so warm requests cost zero API calls
  • Collapsed concurrent requests into a single in-flight refresh, added a failure cooldown, and graceful degradation that serves the last stored rate if every provider is down
  • Made pricing fully dynamic: every listing and detail response computes weight x per-gram rate + making charges, karat-aware and troy-ounce accurate, with backend and frontend matching exactly
  • Built an admin dashboard for products, categories, offers, banners, and a drag-and-drop featured-homepage builder, with sharp-compressed Cloudinary uploads
  • Designed a premium storefront with Playfair Display typography, a pulsing live-rate card, scroll animations, full responsiveness, and dark mode
Results
  • Every product price stays accurate to the day's gold rate automatically, with zero manual re-pricing
  • The storefront stays up even when rate providers fail, serving the last known good rate
  • The shop owner runs the entire catalog, offers, and homepage layout with no code
  • Built for production at barkatalijewellers.com: Vercel storefront, Dockerized API under PM2, Cloudinary media, and CCAvenue payments
  • A polished, high-end experience in both light and dark mode, across desktop and mobile