ALL PROJECTS/HG NORTHCRAFTS

Overview

HG NorthCrafts is a complete e-commerce storefront for a premium handcrafted-goods brand, designed and built end-to-end as a freelance engagement. A React single-page application delivers the shopping experience — catalogue, product detail, cart, search, custom-order requests and an account area — over a Django 5 + DRF API of 30+ token-authenticated, throttled endpoints.

Walkthrough

3 short product films — swipe or use the arrows to move between them.

01 / 0330-Second Pitch

Problem

The brand needed more than a template store — a fast, credible, fully-owned storefront that could take real money safely and be operated and shipped by a single engineer. That meant a clean separation between a snappy React front end and a hardened API, a checkout that never trusts the client for payment state, request throttling to blunt abuse, and an operational story where a single git push could rebuild, migrate and redeploy the entire containerised stack with TLS — all on cost-efficient VPS infrastructure rather than a managed platform.

System Design

How It Works

01/04
01

Browse to secure checkout

How a visitor goes from the catalogue to a paid order without the client ever being trusted for payment state.

  1. 1A visitor browses the React storefront — catalogue, search and product detail — served from cached static assets behind Nginx
  2. 2Adding items builds a cart; at checkout the client calls the API, which prices the order server-side
  3. 3The backend creates a PayPal order server-side and returns it to the client to approve
  4. 4On approval the backend captures and verifies the PayPal payment before the order is marked paid
  5. 5A confirmation email is queued through Celery and the order is recorded against the customer's account
02

Custom-order request

How a customer requests a bespoke handcrafted piece and it reaches the store for follow-up.

  1. 1A customer opens the custom-orders page and describes the piece they want
  2. 2The request is submitted to a token-authenticated endpoint and stored against their account
  3. 3A notification email is dispatched to the store asynchronously through Celery
  4. 4The store reviews and follows up, turning the request into a quote or an order
03

Authenticated, throttled API request

How every API call is authenticated, rate-limited and served — browser to bare metal, in milliseconds.

  1. 1The React SPA calls the API over HTTPS; Nginx terminates TLS and proxies to Gunicorn
  2. 2Django REST authenticates the token and checks the per-endpoint throttle counter in Redis
  3. 3The view reads or writes orders and catalogue in PostgreSQL, using Redis for hot reads
  4. 4The response returns quickly; any email or heavy work is handed to Celery off the request path
04

One push ships the whole stack

How a single git push rebuilds, redeploys and re-secures the entire containerised stack with no manual steps.

  1. 1A push to main triggers the GitLab CI/CD pipeline, which builds a Docker image
  2. 2The pipeline rsyncs the release over SSH to the VPS and runs docker compose up
  3. 3Migrations and collectstatic run, then Nginx reloads with a Certbot-renewed TLS certificate
  4. 4The new version is live in one flow — build, deploy, migrate and secure — end to end

Key Features

  • Full shopping flow — browse catalogue, product detail, search, cart and a secure multi-step checkout
  • Server-verified PayPal payments, with order state that is never trusted from the client
  • Custom-order requests for bespoke handcrafted pieces, captured and routed to the store
  • Curated exclusive / featured items and a visual product gallery
  • Account area with registration, sign-in and order history over token-authenticated endpoints
  • Redis-backed request throttling and session handling to blunt abuse and keep the API responsive
  • Transactional email (order confirmations, contact) and scheduled jobs on Celery + Beat
  • Fully responsive, dark and gold-accented storefront with testimonials, client stories, FAQ and shipping info

Outcomes

  • Delivered a complete, self-owned storefront end-to-end — React front end, Django/DRF API, payments, email and operations — as a single-engineer freelance engagement
  • Made checkout safe by keeping payment state server-authoritative: PayPal orders are captured and verified server-side before an order is ever marked paid
  • Kept the API responsive and abuse-resistant with Redis-backed throttling and sessions, and moved email and scheduled work off the request path onto Celery + Beat
  • Reduced deploys to a single git push: a Dockerised GitLab CI/CD pipeline builds, ships to the VPS, migrates and renews TLS with no manual steps

More work

Mashoor preview
MULTI-VENDOR MARKETPLACE

Mashoor

A bilingual, RTL-ready multi-vendor marketplace for Pakistan's regional specialties

VIEW PROJECT