Skip to content
All projects

Freelance · Energy equipment distribution · 2026

Ups-Batteries

Technical e-commerce platform for a Moroccan UPS and battery distributor: filterable catalogue, quote requests, guest checkout, per-city delivery pricing, a CMI 3-D Secure integration and WhatsApp notifications.

Visit the live site
Client
Ups-Batteries
Duration
7 months
Core stack
Next.js · TypeScript · Express.js
Status
Completed
Ups-Batteries preview

Overview

Ups-Batteries is a Casablanca-based authorized distributor of Eaton UPS units and Sunlight batteries, which also sells voltage stabilisers and protected power strips to businesses and individuals. The project was delivered with MS Signature, which managed the client relationship. I was responsible for the technical side: I designed and built the storefront, the customer area, the admin panel and the REST API behind them, and I deployed and host the platform.

The challenge

  • A technical catalogue where customers choose by specification (voltage, capacity in Ah, power in VA/W, battery technology) rather than by photo.
  • Two kinds of buyers: individuals who order online and businesses that need a quote for larger equipment.
  • Moroccan B2B payment habits (cash on delivery, cheque and bank transfer), with card payments to be switched on once the merchant accounts were ready.
  • Delivery across Morocco with prices that depend on the city, and a shop that needed to be found on Google for searches like “UPS Maroc”.

What I built

Technical catalogue

  • Brand, category and product-line pages with a filterable, paginated catalogue (brand, category, technical attributes, price) and a mega menu.
  • A maintenance script that reads product titles such as “12V-100Ah” or “6kVA 5,4kW” to fill missing filter attributes, in a dry run by default so nothing is overwritten by accident.
  • Product pages with specifications, downloadable datasheets and manuals, related and frequently-bought-together products, reviews and “on quote” pricing for equipment sold on request.
  • A catalogue import from Excel, so the team can load or update products in bulk.

Basket & checkout

  • A guest basket kept in the browser and merged into the customer’s basket after login, with prices and stock re-checked before every order.
  • A three-step checkout (address with Moroccan city search, delivery options priced per city, review and payment) for guests and customers, with account creation offered after a guest order.
  • Cash on delivery, cheque and bank transfer at checkout, plus a quote request form that goes straight to the shop.

Payments, delivery & notifications

  • A CMI 3-D Secure integration on the API: signed payment forms, a server-to-server callback that checks the hash, the amount and duplicate calls, and a log of every transaction. A PayPal flow with MAD to USD conversion is also built, ready to be switched on in the checkout.
  • A carrier-agnostic delivery model: carriers, shipping zones and per-city rates are managed from the admin, so the shop can change delivery partners without touching the code.
  • Order and shipping messages through the WhatsApp Cloud API, alongside transactional emails for accounts, orders, returns, refunds and abandoned baskets.

Admin panel

Screens for the dashboard, orders, returns, refunds, review moderation, products with a rich text editor, categories, brands (including brand-wide discounts), product lines, datasheets, shipping zones, rates and carriers, hero slides, announcements, site settings and users, with drag-and-drop ordering and Excel exports.

Architecture & SEO

  • Modular API: an Express 5 API in TypeScript with Prisma and PostgreSQL, split into domain modules that each have their own routes, controller, service and Zod validation.
  • Multilingual data model: products, categories, brands and site content each have a translation table, serving the French and English versions of the site.
  • Security: short-lived JWT access tokens with a refresh token in an httpOnly cookie, roles for customers, B2B clients and admins, Helmet, a CORS allow-list, rate limiting and HTML sanitising.
  • SEO: canonical and hreflang tags for every page, JSON-LD for products, breadcrumbs and FAQs, a sitemap generated from the catalogue, and dedicated landing pages for key searches.

Tech stack & deployment

  • Frontend: Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS 4, SCSS, next-intl, TanStack Query, Framer Motion.
  • Backend: Node.js, Express 5, TypeScript, Prisma, PostgreSQL, Zod, Nodemailer.
  • Infrastructure: the API runs behind Nginx with HTTPS on a Linux server, which I set up and maintain.

Outcome

  • A complete shop for a technical catalogue, where customers can filter by the specifications that matter to them.
  • One platform for both online orders and business quotes, with the payment methods Moroccan companies actually use.
  • Card payments already built into the API, ready to go live when the merchant account is.
Next projectARE Beauty