Coligo

L'histoire de sa construction

Coligo est un projet collaboratif mené en équipe dans le cadre d'une commande pour des entrepreneurs issus de La Poste. L'objectif : faciliter le portage de colis entre particuliers en s'appuyant sur le réseau de distribution existant — une approche pair-à-pair adossée à une infrastructure logistique professionnelle. Mon rôle au sein de l'équipe était celui de développeur front-end. J'ai travaillé sur l'interface utilisateur avec React et Next.js, en utilisant Material UI pour les composants et Sass pour les styles personnalisés. Travailler en équipe sur une codebase partagée m'a initié aux pratiques collaboratives réelles : branches Git, revues de code, et coordination avec les développeurs back-end. Ce projet a été une première expérience significative de développement en contexte professionnel simulé — avec un client, des specs, des deadlines et une stack imposée. Une étape clé dans ma montée en compétence sur React et l'écosystème Next.js.

Technologies utilisées

• Git
• TypeScript
• React
• JavaScript
• Next.js

J'en ai bavé mais j'y suis arrivé 🚀

// Composant carte de colis avec statut dynamique — React + MUI
import { Card, CardContent, Chip, Typography } from '@mui/material';

type ColisStatus = 'en_attente' | 'en_transit' | 'livre';

const statusConfig: Record<ColisStatus, { label: string; color: 'warning' | 'info' | 'success' }> = {
  en_attente: { label: 'En attente',  color: 'warning' },
  en_transit: { label: 'En transit',  color: 'info'    },
  livre:      { label: 'Livré',       color: 'success'  },
};

export function ColisCard({ reference, destination, status }: {
  reference:   string;
  destination: string;
  status:      ColisStatus;
}) {
  const { label, color } = statusConfig[status];
  return (
    <Card variant="outlined">
      <CardContent>
        <Typography variant="h6">{reference}</Typography>
        <Typography color="text.secondary">{destination}</Typography>
        <Chip label={label} color={color} size="small" sx={{ mt: 1 }} />
      </CardContent>
    </Card>
  );
}