Trilanco Webstore

Architecture

A decoupled monolith: a layered Laravel REST API backend consumed by a standalone React single-page application. The two applications communicate exclusively over HTTP, authenticated via JSON Web Tokens. This separation keeps the frontend and backend independently deployable while keeping the API available for other consumers such as internal tools.

Backend Architecture

The Laravel backend follows a monolithic layered architecture with clear separation of concerns:

• Controller Layer — thin API controllers acting as coordinators, injecting services and repositories via constructor-based dependency injection
• Service Layer — dedicated service classes handling business logic orchestration, keeping controllers lean and logic reusable
• Repository Layer — repositories abstracting all data access behind a consistent interface, built on the Repository Pattern with an interface contract, an abstract base class providing generic CRUD via the Template Method Pattern, and concrete implementations for domain-specific queries. A composable filter abstraction handles query parameters, sorting, and pagination.
• Event Layer — domain events and listeners decouple side effects like notification emails and order processing from core business logic
• Model Layer — Eloquent models with scopes and observers for domain-level behaviour
• Serialization Layer — transformer and serializer classes decouple internal model structure from API response shapes, so the database schema doesn’t dictate the API contract

Frontend Architecture

The React frontend uses a Redux/Saga architecture with disciplined separation of concerns:

• Redux-Saga handles all asynchronous logic via generator-based side effects; components never trigger API calls directly. Actions follow a factory pattern (PENDING → REQUEST → SUCCESS/FAILURE) giving every async operation consistent loading and error states.
• Reselect provides memoised selectors for computing derived state efficiently and preventing unnecessary re-renders.
• Immutable.js is integrated throughout the Redux store, preventing accidental state mutations at the data structure level.
• Container/Presentational pattern keeps connected smart components separate from reusable presentational components.
• Higher-Order Component composition — the pre-hooks equivalent of custom hooks, HOCs handle cross-cutting concerns including auth guards, analytics tracking, form handling, filtering, and pagination.
• Shared modules — authentication and reusable UI components are extracted into git submodules, designed for use across multiple applications and keeping shared concerns maintainable in one place.
• Centralised API client — a middleware-based HTTP client handles all API communication, including JWT token injection and request deduplication. Components never call APIs directly.

Checkout & Payments

Order creation and payment processing are wrapped in database transactions, with domain events triggering follow-on processes on commit.

• Credit card payments are processed via the Worldpay Access API, with the backend handling tokenisation, charge requests, and settlement confirmations. The frontend monitors each stage of the payment flow with timeouts, surfacing actionable guidance to the customer if any step stalls.
• Bank transfers use the HSBC Open Payments API, allowing customers to pay directly from their bank account.
• Webhook events are verified using signature verification to ensure authenticity before processing

Error Monitoring

A custom error logging system captures both frontend and backend errors to a central database. Email alerts are triggered automatically when error frequency spikes, allowing issues to be caught and investigated before they impact customers.

Search

Product search uses Manticore Search, providing full-text search with spelling correction and synonym support. This allows customers to find products even with misspelled or alternative terms, which is particularly important for the specialist equine and agricultural product range.

Database

The application works with two database systems. MySQL serves as the primary application database for products, brands, basket items, users, and other platform data. Oracle provides integration with the existing warehouse and ERP system, with Laravel’s database layer configured to query both connections as needed.

Access Control

A dynamic Role-Based Access Control system manages permissions across the platform. Roles and permissions are stored in the database rather than hardcoded, allowing administrators to create and modify roles without code changes. This supports a range of staff and customer user types, each with tailored access to features and data.

Third-Party Integrations

The platform integrates with several external systems across the order, fulfilment, and customer pipeline:

• Maxoptra for van routing and delivery scheduling, receiving order data and returning optimised delivery routes
• Vecta CRM for syncing customer and order data to the sales team
• Zendesk for customer support, linking orders to support tickets
• Mailchimp for contact syncing and subscription management
• eBay for automatic order fulfilment, with eBay orders flowing through to the warehouse via the platform
• Ideal Postcodes for address lookup and validation