Prototypage et Site web

STINT - App Web pour les passionés de F1

J’ai conçu et développé STINT, une Progressive Web App F1 francophone permettant aux fans de Formule 1 de suivre la saison en temps réel depuis leur mobile, en complément de la retransmission télévisée. (lien de la web app sur les captures)

Image STINT 1

Points clés du projet :

  • Architecture full-stack : PWA mobile-first hébergée sur O2switch (Passenger/Node.js), connectée à une base MariaDB servant de cache intelligent pour minimiser les appels aux API externes.
  • Live Timing : Système de timing en direct via Socket.io — le serveur interroge l’API OpenF1 toutes les 5 secondes et diffuse les positions, les données pneumatiques et la météo à tous les utilisateurs connectés simultanément, avec une seule connexion API côté serveur.
  • Pipeline IA : Intégration de Groq et Gemini pour filtrer, traduire et résumer automatiquement les actualités F1 issues de 7 flux RSS internationaux (FR/EN/IT). Le pipeline détecte les doublons, filtre le contenu non-F1 et génère des résumés en français.
  • Authentification multi-méthodes : Système d’authentification Google OAuth2 et Email/mot de passe (PBKDF2 natif Node.js, sans dépendances externes), avec vérification par email via SMTP maison.
Image STINT 2
  • Chat communautaire : Espace « Paddock » en temps réel via Socket.io avec gestion des comptes utilisateurs, modération et système de likes.
  • Cartographie live : 22 tracés de circuits SVG personnalisés, superposés au flux de positions GPS OpenF1 pour afficher les voitures en temps réel sur le circuit.
  • Contraintes techniques : Hébergement mutualisé (o2switch/Passenger) nécessitant des adaptations spécifiques — remplacement de cookie-parser par un parser maison (crash WebAssembly), forçage du transport Socket.io en polling (WebSockets bloqués par le proxy), gestion UTC stricte des fuseaux horaires pour les horaires de sessions.

Frontend : HTML5, CSS3, JavaScript (PWA, Service Worker, Web Push)

Backend : Node.js 22, Express, Socket.io

Base de données : MariaDB

APIs : OpenF1 (live timing), Jolpica/Ergast (historique F1 depuis 1950), Open-Meteo (météo circuits), Groq & Gemini (IA)

Infrastructure : O2switch (Passenger), Google OAuth2, VAPID (notifications push)

Fonctionnalité phare : Architecture de cache multi-niveaux — les données Jolpica (879 pilotes, historique complet depuis 1950) sont mises en cache dans MariaDB dès le premier accès, réduisant les temps de réponse de ~10s à quelques millisecondes pour les consultations suivantes.

JOFLIX - Plateforme de Streaming Personnelle & Automatisée

J’ai conçu et développé JOFLIX, une solution de streaming privée permettant de centraliser et de diffuser une bibliothèque multimédia familiale (films, séries, animés).

Points clés du projet :

  • Architecture hybride : Interface hébergée sur le cloud (O2switch) connectée via API à un stockage local (NAS Synology).

  • Automatisation : Développement d’un « moissonneur » en PHP qui scanne les fichiers, récupère intelligemment les métadonnées via l’API TMDB et les stocke en base de données MariaDB pour optimiser les performances.

  • Expérience Utilisateur : Lecteur vidéo personnalisé avec Video.js, interface responsive (Mobile/Desktop) et monitoring en temps réel de l’état du serveur (CPU, RAM, Température).

  • Sécurité : Mise en place d’un proxy API pour protéger les clés de services tiers et sécuriser l’accès aux données.

  • Frontend : HTML5, CSS3 (Flexbox/Grid), JavaScript, Video.js.

  • Backend : PHP (Architecture API).

  • Base de données : MariaDB / MySQL.

  • Infrastructure : NAS Synology (DSM), Hébergement O2switch, API TMDB.

  • Fonctionnalité phare : Système d’indexation automatique avec respect des quotas de requêtes API et mise en cache des données pour une rapidité d’affichage optimale.

Pour des question de securité le lien du site n’est pas present, mais je peux le presenter en cas d’entretien.

Site web Isabellatoca

Site Isabellatoca

Création du design pour un site web de salon de coiffure

Dans le cadre de ce projet, j’ai conçu l’identité visuelle et le design complet d’un site web pour un salon de coiffure. L’objectif était de créer une interface moderne, élégante et intuitive, reflétant le style, la charte graphique et le savoir-faire du salon.

Ce projet a été réalisé en collaboration avec l’entreprise Polaris, qui s’est chargée du développement et de l’intégration du site via WordPress.

Prototype Isabellatoca

proto isabellatoca mobile

Prototypes Desktop & Mobile sur Figma

J’ai conçu les maquettes et prototypes interactifs pour les versions desktop et mobile du site web du salon de coiffure. L’objectif était de garantir une expérience utilisateur fluide et cohérente sur tous les appareils, en respectant les principes de responsive design.

proto isabellatoca desktop

Prototype Luxelec

proto Luxelec mobile

Prototypes Desktop & Mobile pour Luxelec

Dans le cadre de ma soutenance de diplôme, j’ai conçu les maquettes et prototypes interactifs pour les versions desktop et mobile d’un site web dédié à une marque de véhicules électriques.


Mon objectif était de créer une expérience utilisateur moderne et immersive, mettant en avant l’innovation et l’élégance de la marque. Le travail a été réalisé sur Figma, en respectant les principes de responsive design et en soignant chaque détail visuel pour assurer cohérence et ergonomie.

proto Luxelec desktop