Next-Matrix
Headless B2B Configurator & ERP Portal
Next-Matrix is a complete frontend engineering overhaul of a legacy B2B obloane/shutters portal. Replacing slow, traditional monolithic PHP compilation with an ultra-responsive Next.js 15 App Router client, the application coordinates intricate customizable calculations, interactive drawing canvases, and multi-layered reports synced directly with WordPress via customized REST APIs.
infoReports: Multi-Year Comparison
Advanced data dashboard illustrating multi-year (2023-2026) SQM ordering volumes and total transaction values for top companies using interactive line graphs.
Decoupled Headless Architecture
By separating the frontend React tier from WordPress, users fetch cached data instantly. Authentication is managed securely via JSON Web Tokens, and CORS barriers are resolved at the routing layer.
Next.js 15 Frontend
Renders client-side routes, initializes local Zustand/Redux stores, and renders Canvas drawings.
Reverse Proxy (Next)
Rewrites paths from /api/matrix/* to backend host to bypass CORS locks. Injects headers via Middleware.
WordPress Engine
Processes order formulas, stores customer profiles, logs SQL entries in WooCommerce DB.
Key Capabilities & Features
A comprehensive overview of custom components engineered to run under Next-Matrix:
Dynamic Configurator Engine
Manages shutters, awnings, and battens configuration. Employs condition validation (Ecowood, Wood, Biowood) parsing dimensions, layout configuration rules, and condition dependencies instantly.
Canvas Technical Sketches
Integrates Konva canvas drawing tools and Raphael SVG builders directly in layout configurator steps, allowing users to draw structures and save blueprints to order attachments.
Factory Query Tickets
Order issue resolution interface mapping backend tickets categorized by status indicators: stgh_pending, stgh_answered, and stgh_closed, letting operators response seamlessly.
Repairs Filing Desk
A portal dedicated to B2B claiming. Clients can select past order reference codes, detail issues, and attach multiple images using custom file-upload hooks directly connected to WordPress.
Advanced Reports & Charts
A shared Reports Context coordinates API calls to pull transaction stats, rendering responsive line and bar charts (ApexCharts) comparing users, materials, and monthly metrics across fiscal years.
Container ETA Tracking
Shipment schedules mapping total SQM, panels, cartoons, and container weights. Supports debounced keyword lookup (300ms), 50-500 pagination, and dynamic PDF exportation via jsPDF.
Secure Headless API Pipelines
The platform is integrated with WordPress using custom REST endpoints, secured via JSON Web Tokens. Because editing is context-dependent, a dynamic product detector analyzes cart item metadata to switch endpoint routes on the fly.
vpn_keyJWT Token Authorization Flow
Login is handled via POST /wp-json/jwt-auth/v1/token, returning a bearer token stored securely in cookies and localStorage. Active queries decode the token payload expiry parameter (exp) before injecting standard auth headers:
headers: {
Authorization: 'Bearer ' + token
}routeDynamic Endpoint Routing
Instead of querying a single endpoint, utils/cart/productTypeDetector.ts reviews structural variables. When shop_type === 'pos', it maps to POS endpoints. If uk or fob is set, it maps to UK/FOB components shop. Defaults map to custom shutter forms.
apiPrimary API Route Mapping
| Action | HTTP Method | REST Endpoint Path |
|---|---|---|
| Get Cart Products | GET | /wp-json/custom/v1/get-cart-products/{id} |
| Add Shutter Product | POST | /wp-json/custom/v1/add-shutter-product |
| Clone/Delete Item | DELETE/POST | /wp-json/custom/v1/{clone|delete}-{cart|pos|component}-product |
| Factory Tickets List | GET | /wp-json/custom/v1/factory-queries |
| Register Product Repair | POST | /wp-json/custom/v1/add-order-repair |
| Get Containers ETA | GET | /wp-json/custom/v1/containers |
Data Contracts & Models
Standard TypeScript models map raw REST properties to typed React configurations, aligning components across all configuration pages.
interface Cart {
id: number;
title: { rendered: string };
date: string;
meta: {
type: 'normal' | 'sample' | 'awning' | 'components';
shop_type?: 'pos' | 'uk' | 'fob';
};
deliveryStatus?: string;
}
interface Order {
order_number: string;
panels: number;
frames: number;
cartoons: number;
sqm: number;
items: number;
weight: number;
deliveryStatus?: string;
}interface User {
id: string;
username: string;
email: string;
display_name: string;
roles?: string[];
company?: string;
billing_company?: string;
}Architectural & Performance Optimizations
B2B configurators evaluate dense formulas. To support instant response rates and minimize loading gaps, a hybrid performance layout was integrated:
Activated React Compiler configurations to auto-optimize React 19 component lifecycle, eliminating redundant useMemo and useCallback, reducing re-renders by 60-70%.
Implemented server state pooling via TanStack Query. Configured a 5-minute stale threshold alongside a 10-minute garbage collection window, preventing repetitive API hits on catalog navigation.
Centralized finance data fetch loops inside a shared context provider. Shared across the multi-tabs reports page, reducing API fetches by 80% and removing chart rendering jitters.
Project Screen Library
Click on any of the screenshots below to open them in the lightbox viewer.
