Biris Tech Logo
Biris Tech
Toutes les réalisations
Site Web

Lucas-ZAKH Cargo : plateforme de transport et logistique Chine - Afrique de l'Ouest

Plateforme web installable pour un transitaire du corridor Chine - Bénin / Togo : présentation des offres aérienne et maritime, demande de devis, suivi de colis et espace client avec reçus PDF.

Client
Lucas-ZAKH CARGO
Année
2026
Domaine
Site Web
Voir le projet en ligne
Page d'accueil de Lucas-ZAKH CARGO
2
Pays desservis
3-4 semaines
Délai aérien
~3 mois
Délai maritime

Le contexte

Lucas-ZAKH CARGO opère sur le corridor commercial Chine - Afrique de l'Ouest et accompagne particuliers, commerçants et entreprises dans l'expédition de leurs marchandises vers le Bénin (Cotonou) et le Togo (Lomé). Sur ce marché, la relation client passe principalement par WhatsApp et par téléphone, ce qui rend les demandes de devis difficiles à tracer et le suivi des colis chronophage. L'entreprise avait besoin d'un point d'entrée public qui explique clairement les deux modes d'expédition, leurs délais et leur logique de coût, et qui permette au client de vérifier lui-même l'état de son envoi. Le site devait tenir compte d'usages très majoritairement mobiles et de connexions inégales. Le projet a donc été pensé comme une application web installable plutôt que comme une simple vitrine.

La mission

  1. 01Concevoir la direction visuelle et l'identité d'interface du site, réalisées par Biris Tech
  2. 02Structurer l'information : offres aérienne et maritime, destinations, délais et options
  3. 03Créer un parcours de demande de devis guidé par destination et type de marchandise
  4. 04Mettre en place un suivi de colis accessible par numéro de suivi
  5. 05Développer un espace client avec authentification par numéro de téléphone et via Google
  6. 06Intégrer le paiement en ligne et la génération de reçus PDF téléchargeables
  7. 07Rendre le site installable sur mobile sous forme d'application web progressive
  8. 08Connecter l'interface à une API métier dédiée pour les destinations, contacts et expéditions

Ce que nous avons fait

Notre premier travail a été de retracer le parcours réel d'un client du corridor Chine - Afrique : il cherche un tarif, il veut connaître un délai, puis il veut savoir où est son colis. Cette séquence a structuré la navigation en quatre pages publiques (accueil, à propos, destinations, contact) doublées d'un accès rapide vers le devis, le suivi et l'espace client. Biris Tech a réalisé le design : palette sombre, typographie Inter, cartes comparatives aérien / maritime et repères visuels par pays pour rendre l'offre lisible en un coup d'œil. Nous avons ensuite développé une application Vue 3 monopage, avec transitions courtes et navigation par onglets en bas d'écran sur mobile, afin de retrouver les codes d'usage d'une application native. L'espace client, les paiements et la génération de reçus PDF côté navigateur ont été branchés sur une API métier hébergée séparément. Enfin, le site a été publié en application web progressive, avec manifeste et service worker, pour permettre l'installation sur l'écran d'accueil et un fonctionnement plus tolérant aux connexions instables.

Les livrables

  • Direction artistique et système d'interface complet (couleurs, typographie, composants)
  • Site vitrine adapté à tous les écrans en quatre pages publiques
  • Parcours de demande de devis avec destination, marchandise et options
  • Module de suivi de colis par numéro de suivi
  • Espace client avec authentification téléphone et connexion Google
  • Application web progressive installable (manifeste, icônes, service worker)
  • Génération de reçus PDF et intégration du paiement en ligne

Les résultats

  • Une offre auparavant expliquée au cas par cas devient lisible en ligne : modes, délais et logique de coût sont présentés de façon comparable
  • Les demandes de devis arrivent structurées, avec destination, type de marchandise et volume, au lieu de messages libres
  • Le suivi en autonomie décharge l'équipe d'une partie des sollicitations de statut
  • L'installation sur écran d'accueil donne au client un accès direct, sans passer par un navigateur
  • Les reçus PDF fournissent une trace formelle immédiate après paiement

Les technologies utilisées

Ce qui a servi à mettre le projet en place, et pourquoi ces choix plutôt que d'autres.

Socle applicatif

  • Vue 3 (3.5.32)

    Application monopage réactive, adaptée aux parcours dynamiques de devis et de suivi

  • Vue Router

    Gère les onze routes du site, des pages publiques à l'espace client

  • Pinia

    Centralise l'état de session et les données client partagées entre les vues

  • Vite

    compilation moderne produisant un paquets de code unique versionné, servi avec un cache long

Interface et contenus

  • Inter (Google Fonts)

    Typographie neutre et très lisible sur petits écrans, préchargée via preconnect

  • CSS à portée de composant

    Styles isolés par composant et transitions de navigation cohérentes

Fonctions métier

  • API dédiée api.lucaszakh.com

    Sépare le métier (destinations, contacts, expéditions, comptes) de l'interface

  • Axios

    Client HTTP unifié vers l'API, avec gestion des sessions authentifiées

  • jsPDF

    Génère les reçus de paiement directement dans le navigateur, sans aller-retour serveur

  • FedaPay

    Paiement en ligne adapté au contexte ouest-africain, aux côtés du Mobile Money, du virement et des espèces

Diffusion et performance

  • Application web progressive

    Manifeste et service worker pour l'installation sur écran d'accueil et la résistance aux connexions faibles

  • nginx 1.25.5 derrière Caddy

    Service statique rapide du paquets de code, avec HTTP/3 annoncé via Alt-Svc

  • En-têtes de sécurité sur l'API

    HSTS, CSP et politique CORS restreinte protègent l'espace client

L'architecture mise en place

Application Vue 3 monopage servie en statique par nginx derrière Caddy, dialoguant avec une API métier hébergée sur un sous-domaine dédié (api.lucaszakh.com). Les pages publiques sont rendues côté client; le devis, le suivi, l'espace client et le paiement passent par l'API, tandis que les reçus PDF sont générés directement dans le navigateur. L'ensemble est distribué comme application web progressive installable.

01

Interface client

Rendu des pages publiques et des parcours interactifs sur bureau et mobile

  • Vue 3
  • Vue Router (11 routes)
  • Pinia
  • CSS à portée de composant
  • Typographie Inter
02

Services métier

Données et opérations : destinations, contact, comptes, expéditions et paiements

  • API api.lucaszakh.com
  • Axios
  • Authentification téléphone et Google
  • FedaPay, Mobile Money, virement, espèces
  • jsPDF pour les reçus
03

Diffusion et infrastructure

Publication, mise en cache et sécurité

  • paquets de code Vite versionné
  • nginx 1.25.5
  • Caddy en frontal
  • HTTP/3 annoncé (Alt-Svc)
  • Manifeste et service worker
  • HSTS et en-têtes de sécurité sur l'API

Le projet en images

Cliquez sur un visuel pour l'agrandir.

Page d'accueil : positionnement sur le corridor Chine - Afrique de l'Ouest et accès direct au devis et au suivi
Accueil en pleine page : offres, avantages, destinations et appels à l'action
Page À propos : présentation de l'entreprise et de sa présence au Bénin et au Togo
Destinations : villes de départ en Chine et points de livraison à Cotonou et Lomé
Suivi de colis : recherche par numéro de suivi
Demande de devis : destination, type de marchandise et options d'expédition

Sur mobile

La majorité des visites se fait au téléphone : voici le rendu tel que le voit un visiteur.

Accueil sur mobile, avec navigation par onglets en bas d'écran
Page À propos en version mobile
Destinations en version mobile
Suivi de colis en version mobile
Formulaire de devis en version mobile

Démonstrations

Parcours complet du siteAccueil, à propos, destinations, demande de devis et suivi d'expédition.