Multi-Type Transport Quote System

Overview

**axialQuote** is a comprehensive, full-stack web application designed for **DOMTOMCOLIS**, a transport company specializing in shipping to French overseas territories (DOM-TOM). The system provides an automated quote generation platform that handles four distinct transport types: vehicles, motorcycles, containers, and groupage cargo.

Built with modern web technologies and following industry best practices, axialQuote streamlines the quote process from initial customer inquiry to PDF generation and email delivery, while providing administrators with a complete management interface for quotes, tariffs, users, and analytics.

Project Details

**Type:** Full-Stack Web Application  

**Client:** DOMTOMCOLIS  

**Year:** 2024-2025  

**Status:** Production  

**Technologies:** React 19, TypeScript, Fastify, MongoDB, Redux Toolkit, Vite, Tailwind CSS

The Challenge

Transport companies serving French overseas territories face complex pricing challenges due to:

– Multiple transport types requiring different calculation methods

– Varying tariffs based on routes, ports, vehicle characteristics, and cargo specifications

– Complex tax calculations (VAT, overseas taxes, port duties)

– Need for real-time price previews during form completion

– Requirement for professional PDF quote documents

– Necessity of automated email delivery to customers

DOMTOMCOLIS needed a unified system that could handle all these requirements while maintaining accuracy, security, and a smooth user experience.

The Solution

axialQuote is a dual-application system consisting of a modern React frontend and a robust Fastify backend API, working together to provide a seamless quote generation experience.

Frontend Application

The frontend is a **React 19 Single Page Application** built with:

– **TypeScript 5.9** for type safety throughout the codebase

– **Redux Toolkit** for predictable state management

– **React Router 7** for client-side navigation

– **Vite 7.1** for lightning-fast development and optimized builds

– **Tailwind CSS 4** for responsive, utility-first styling

**Key Features:**

– **Four Quote Types:** Each with dedicated multi-step forms

  – Vehicle quotes (cars, SUVs, utility vehicles)

  – Motorcycle quotes (motorcycles, scooters, quads)

  – Container quotes (20ft/40ft FCL)

  – Groupage quotes (LCL – Less than Container Load)

– **Real-time Calculations:** Live price previews as users fill out forms

– **Multi-step Forms:** Intuitive pagination with progress tracking

– **Admin Panel:** Comprehensive management interface with 26+ features

– **Responsive Design:** Mobile-first approach ensuring usability across devices

**Architecture Highlights:**

– **349 TypeScript/TSX files** with ~35,800 lines of code

– Feature-based organization for maintainability

– Reusable component library (25+ shared components)

– Custom hooks for business logic (50+ hooks)

– Type-safe Redux integration

Backend API

The backend is a **Fastify 4 REST API** built with:

– **TypeScript 5.9** for type-safe server-side code

– **MongoDB** with dual database architecture (app data + authentication)

– **Puppeteer** for PDF generation from HTML templates

– **Nodemailer** for automated email delivery

– **JWT** for secure authentication

**Key Features:**

– **Quote Management:** CRUD operations with unique ID generation (format: YYYYAQXXXXT)

– **Real-time Calculations:** Complex pricing algorithms for each transport type

– **PDF Generation:** Professional quote documents with custom templates

– **Email Service:** Automated delivery with PDF attachments

– **User Management:** Role-based access control (user, admin, superadmin)

– **Tariff Management:** 26+ tariff configuration endpoints

– **Security:** CSRF protection, rate limiting, honeypot bot detection

**API Structure:**

– RESTful endpoints under `/api/v2`

– Swagger documentation for development

– JSDoc documentation for code reference

– Comprehensive error handling and validation

Technical Architecture

Quote Calculation System

Each quote type has its own calculation service handling:

– **Transport Costs:** Freight, pre-carriage, post-carriage tariffs

– **Fees:** Debarkation, transit/SIP/TID, port duties

– **Taxes:** Overseas tax (OM), VAT, local taxes by territory

– **Insurance:** Based on declared cargo value

– **Surcharges:** Hybrid/electric vehicle premiums

– **Total Amounts:** HT (before tax) and TTC (all taxes included)

Database Design

**Dual MongoDB Architecture:**

– **App Database:** Quotes, configuration parameters, tariffs, templates

– **Auth Database:** Users, authentication tokens, password resets

**Key Collections:**

– Quotes (with type-specific schemas)

– Configuration variables (TVA rates, coefficients, port fees)

– Tariff tables (freight, debarkation, transit, OM percentages)

– User accounts with role-based permissions

Security Features

– **JWT Authentication:** Secure token-based sessions with refresh tokens

– **CSRF Protection:** Token validation for state-changing operations

– **Rate Limiting:** Protection against brute force and abuse

– **Honeypot Fields:** Bot detection in public quote forms

– **Timing Validation:** Form completion time checks

– **HTTP-only Cookies:** Secure session management

Admin Panel

The administration interface provides comprehensive management capabilities:

Quote Management

– View all quotes with advanced filtering and sorting

– Quote status tracking and updates

– CSV export functionality

– Detailed quote view with full calculation breakdown

Tariff Management (26+ Features)

– **Vehicle Tariffs:** Freight rates, pre-shipment fees, transit fees, OM percentages, debarkation fees

– **Motorcycle Tariffs:** Similar structure adapted for two-wheelers

– **Container Tariffs:** Freight rates, local fees, port duties, make-available fees

– **Groupage Tariffs:** Weight/volume-based pricing tiers

User Management

– CRUD operations for admin users

– Role assignment (admin, superadmin)

– Activity tracking and status management

– Password reset functionality

Reports & Analytics

– Abandoned quotes tracking

– Contact form submissions

– Conversion rate analysis

– Processing duration metrics

– Follow-up management

– Email send tracking

– Volume statistics and dashboards

Development Process

Code Quality

– **JSDoc Documentation:** Comprehensive documentation for all functions, classes, and components

– **TypeScript Strict Mode:** Full type safety across the codebase

– **ESLint:** Code quality and consistency enforcement

– **Prettier:** Consistent code formatting

Testing & Validation

– Real-time form validation

– API endpoint testing

– PDF generation verification

– Email delivery testing

– Cross-browser compatibility

Deployment

– **Frontend:** Static build optimized with Vite, deployable to any static hosting

– **Backend:** Node.js application with Docker support

– **Environment Configuration:** Secure management of API keys and secrets

– **Database Migrations:** Scripts for initializing tariffs and configuration

Results & Impact

axialQuote has successfully automated the quote generation process for DOMTOMCOLIS, providing:

– **Efficiency:** Automated calculations eliminate manual pricing errors

– **Speed:** Real-time previews enable instant customer feedback

– **Professionalism:** Branded PDF quotes enhance company image

– **Scalability:** System handles multiple quote types with consistent architecture

– **Maintainability:** Well-documented, type-safe codebase ensures long-term sustainability

– **Security:** Robust authentication and protection mechanisms safeguard sensitive data

Technologies Used

Frontend

– React 19.1

– TypeScript 5.9

– Redux Toolkit 2.x

– React Router 7

– Vite 7.1

– Tailwind CSS 4.x

– Font Awesome

Backend

– Fastify 5.4

– TypeScript 5.9

– MongoDB 8.18

– Mongoose 8.18

– Puppeteer 24.11

– Nodemailer 6.9

– JWT (jsonwebtoken)

– bcryptjs

Development Tools

– Node.js 18+

– pnpm

– JSDoc

– ESLint

– Prettier

– Nodemon

Project Statistics

– **Frontend:** 349 TypeScript/TSX files, ~35,800 lines of code

– **Backend:** 252 TypeScript files

– **Quote Types:** 4 complete workflows

– **Admin Features:** 26+ management screens

– **API Endpoints:** 50+ RESTful routes

– **Reusable Components:** 25+ shared UI components

– **Custom Hooks:** 50+ React hooks

Key Learnings

This project provided valuable experience in:

– Building complex calculation engines with multiple variables

– Designing scalable multi-type form systems

– Implementing secure authentication and authorization

– Creating professional PDF generation workflows

– Managing large-scale TypeScript codebases

– Optimizing React applications for performance

– Integrating multiple third-party services (email, PDF)

Future Enhancements

Potential improvements include:

– Advanced analytics dashboards

– Quote comparison features

– Customer portal for quote history

– Integration with shipping tracking systems

– Mobile app for on-the-go quote management

– Multi-language support

—

**Project Links:**

– Frontend application in production : https://axialquote.domtomcolis.com

– [DOMTOMCOLIS](https://www.domtomcolis.com/) – Client website

– [GitHub](https://github.com/pyleglise/) – Developer profile

**Author:** Pierre-Yves Léglise  

**Company:** [axialdata](https://www.axialdata.net/)