E-commerce
MDR Electrical Supply
An electrical supply storefront and wholesale catalog interface.
Context / scope
Overview and scope
A storefront and catalog interface for an electrical supply business, built on the ToolSwift commerce platform.
The routes in the code are home, about us, shop, catalogue, product details, cart, wishlist, support and contact us.
Front-end developer. The CV lists integrated DTC e-commerce storefronts among the front ends built.
Results
- The CV records no result figures for this project, so none are stated.
- The storefront captures use invented products, prices and store details; brand names and logos are the project's own.
Interface / screens
Walkthrough
Screen 1 of 6: Home page. Real interface, sample data.
Behaviour / flows
Features and flows
Product availability wording
- An interface override replaces the shared library's Out of stock wording with Coming soon in visible text, titles and accessible labels.
Engineering / decisions
Architecture and decisions
Next.js 16 with React 19 and TypeScript. Pages combine MUI components with Tailwind CSS 4 styling and the shared Tailwind config.
Product, catalogue and cart data is fetched with TanStack Query and held in jotai atoms. Page content from the CMS is shown with Strapi's blocks renderer.
The dependency list also includes Firebase, Swiper, jsPDF and zod.
Apply availability wording outside the shared library
The shared library exposes no configuration hook for its unavailable-product text. An app-level override updates existing labels and observes added nodes and text changes, disconnecting its observer on cleanup.
Limits / notes
Known limitations
- The screenshots show the storefront interface; live maps and PDF generation are outside the captured walkthrough.
Stack / tools
Technologies
- Next.js
- React
- TypeScript
- Tailwind CSS
- MUI
- TanStack Query