ToolSwiftDashboards
ToolSwift customer dashboard
A multi-tenant B2B customer portal for catalogs, orders, quotes and company purchasing.
Context / scope
Overview and scope
ToolSwift is a headless e-commerce SaaS platform: a central CMS, direct-to-consumer storefronts and multi-tenant B2B customer portals. The customer dashboard is the B2B portal where a company's buyers browse a catalog, build carts, request quotes, track orders and manage payments.
One codebase serves several clients. Each client is a configuration file (nine client configs in the repo: theme colours, branding, PWA manifest) selected at build time through a client id, so a new tenant does not need a fork.
Buyers at contracting and supply companies work across several companies and store locations. The portal has to keep each company's data isolated, show the right prices and fulfilment options for the selected company and store address, and stay fast with large catalogs and long order histories.
Typical tasks are re-ordering, comparing quote and order status, approving or signing documents, and paying invoices, so the interface favours dense tables, filters and quick actions over marketing-style layouts.
Front-end developer; architected the front end of the ToolSwift platform.
Results
- Per the CV: API calls reduced by about 70% through debounced cart operations, optimised caching and optimistic UI updates; lazy loading, parallel data fetching and infinite scrolling applied to high-traffic modules.
Interface / screens
Walkthrough
Screen 1 of 6: Overview page. Real interface, sample data.
Behaviour / flows
Features and flows
Shop and cart: catalog and product detail pages, variant and custom-input handling, add-to-cart from cards and modals, saved lists, and a checkout with Stripe payment confirmation and redirect-return handling.
Quotes, orders and payments: a quote-to-order path, order details with line items, a payments view with insights, invoices and statements, and a documents area where customers can review, sign or decline portal documents.
Collaboration: real-time notifications and chat over Socket.IO, review moderation, company profile and jobs management, and a terms-acceptance gate for first login.
Cart feedback
- Cart items show a notice when the API reports that a fulfilment method was cleared, prompting the buyer to select a new option.
- A failed cart fetch shows an error toast while retaining the previous cart data.
Engineering / decisions
Architecture and decisions
Server state lives in TanStack Query; client state (selected company, store address, auth, UI) in small Zustand stores. Cart mutations are optimistic: the cache is updated in onMutate and rolled back if the request fails, so the cart feels instant.
Routing uses TanStack Router with automatic code splitting, so each route is its own chunk. The PWA is installable-only by design: static assets are precached, API calls are NetworkOnly and HTML is never precached, so a stale shell or stale business data is never served across tenants.
Quality gates: TypeScript, ESLint, Husky and commitlint, Vitest unit tests (about 120 test files) and 31 Playwright end-to-end specs covering auth, protected routes, cart and listing flows. Sentry is wired in for error reporting.
Company-scoped cart cache
The cart query includes the selected company ID in its cache key, keeping cached carts separate by company. It uses a 30-second stale time and disables refetching on window focus.
One cart error notification
A shared flag suppresses duplicate error toasts when several components use the cart query; it resets after the query leaves its error state.
Limits / notes
Known limitations
- The screenshots use Inter in place of Onest and Figtree, so typography differs from the original interface.
Stack / tools
Technologies
- React
- TypeScript
- Vite
- TanStack Query
- Zustand
- Socket.IO
- Stripe
- Playwright
Part of ToolSwift
ToolSwift is a headless commerce platform with a merchant admin interface and a B2B customer portal.
The admin handles catalogues, inventory, orders and quotes; the customer portal lets company buyers browse products, build carts and manage orders and payments.
I implemented the front ends, including a marketing site with product pages, articles and a demo-request form.