Skip to content
Next.jsTailwind CSSshadcn/uiTypeScript

Reactive Store

Online store for a Lebanese medical and rehabilitation supplies retailer, with a catalog, cart and checkout that sends the order to the store on WhatsApp.

About

A store website for Reactive Store, a seller of medical, rehabilitation and healthcare supplies in Lebanon. The brief was a site that looks credible to people buying equipment for care at home or in a clinic: browsable departments, product pages with real specifications, and a simple way to order. Version 1 is built and waiting on the store for final prices, photos and contact details.

Challenges

Buyers of medical equipment want specifications and reassurance before they order, not a flash-sale layout. The store had no payment gateway or order backend, and the team confirms totals and delivery with each customer by phone, so the site needed a way to collect orders without a server or database.

Solutions

Next.js 16 with Tailwind CSS and shadcn/ui. Products, departments, specifications, prices and stock live in one typed data file, and contact details, hours, delivery and warranty in another, so the owner changes data and never components. The shop has search, filters, sort and department pages. The cart is kept in the browser, and checkout collects delivery details and a payment method, then opens WhatsApp with the full order written out for the customer to send. Products without a price show "Price on request". Moving to online orders later means replacing one submit handler.

Technologies

Next.js 16ReactTypeScriptTailwind CSS 4shadcn/uiRadix UI
cart-provider.tsx
const STORAGE_KEY = "reactive-store-cart";
const EMPTY: CartLine[] = [];
const listeners = new Set<() => void>();
let current: CartLine[] | null = null;

function readStored(): CartLine[] {
  try {
    const raw = window.localStorage.getItem(STORAGE_KEY);
    const parsed = raw ? (JSON.parse(raw) as CartLine[]) : [];
    return Array.isArray(parsed) ? parsed.filter((l) => getProduct(l.slug) && l.qty > 0) : [];
  } catch {
    return [];
  }
}

function getSnapshot() {
  if (current === null) current = readStored();
  return current;
}

function getServerSnapshot() {
  return EMPTY;
}

function emit() {
  listeners.forEach((l) => l());
}

function write(next: CartLine[]) {
  current = next;
  try {
    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
  } catch {
    // Storage can be unavailable (private mode); the cart still works for this visit.
  }
  emit();
}
Reactive Store gallery image 1
Reactive Store gallery image 2
Reactive Store gallery image 3
Reactive Store gallery image 4

Ready To Build Something Real?

Whether you need a Webflow site your team can run, a full-stack web app, or a second pair of hands on an existing codebase, I'm open to freelance projects and full-time roles. Agencies: I also build white-label, under your brand.

Book a 20-min call