Overview

Elegance is a working jewelry e-commerce store priced in Pakistani rupees. It started as a static HTML template, and I turned it into a full-stack application with a real catalogue, accounts, cart, Cash on Delivery checkout, order tracking and an admin back office.

My role

The visual design comes from a third-party template. I ported its pages into a Next.js frontend with Redux state, and built everything behind it: the Express REST API, the Prisma data model on MySQL, cart and checkout logic, coupons, order tracking, reviews, email notifications, the admin panel and the Render deployment.

What it does

• Shop with category and price filters, sorting, search and pagination, plus product pages with image galleries and reviews.
• Cart for guests and signed-in users with a live mini-cart, coupon codes and Cash on Delivery checkout.
• Every order gets a tracking number, status timeline and estimated delivery date, and can be looked up with order number and email.
• Accounts with saved addresses, order history, cancellation of pending orders, and forgot and reset password.
• Wishlist, product compare, and homepage testimonials drawn from real 4- and 5-star reviews.
• Admin dashboard for products with image upload, categories, orders and status updates, coupons and users.

How it's built

The frontend is Next.js 14 (App Router) with Redux Toolkit and RTK Query, whose cache tags keep cart, order and admin views in sync after changes. Next.js rewrites proxy API and upload requests to the backend, so the browser talks to one origin. The backend is Node.js and Express with Prisma over MySQL on TiDB Cloud. Auth uses JWTs in httpOnly cookies with customer and admin roles and bcrypt-hashed passwords; helmet, express-validator and rate limits on auth, checkout, reviews and contact harden the API. Images go to Cloudinary in production with a local-disk fallback, order emails go out through Nodemailer, and money is stored as integer cents. Both services deploy to Render.

Highlights

• No overselling: checkout runs in a Prisma transaction that decrements stock only where enough remains and bumps coupon usage only while under its limit, so concurrent orders can't oversell an item or reuse a single-use coupon.
• Guest-to-member carts: visitors get a cart keyed by a guest cookie, which merges into their account cart when they sign in or register.
• Safe order references: order numbers carry a random suffix so guest orders can't be found by guessing, and cancelling an order restocks its items and releases its coupon.

Storefront design based on the static jewelry template by Dennis Nzioki (DNXEMPIRE).