Logo Cinquin Andy Signature

[Wildlife] - F1 Realtime race track

Développeur Freelance - Logo

Le projet en image

Résumé du projet

Dans le cadre de ma collaboration avec Wildlife.LA, j'ai eu l'opportunité de participer au développement d'une application de fouuu pour la Formule 1 en partenariat avec AWS !

Le Projet

L'idée du projet est de base, de faire un générateur de circuit de F1, j'ai eu la chance de travailler avec les gens archi talentueux et compétent, et travailler sur un super projet, on a même des super vidéos et des supers images ou on voit Lewis Hamilton et Charle Leclerc utiliser notre application ! fabuleux non ?
Projet, comme d'habitude, base sur Nextjs, Vercel, quelques services chez AWS, les IA d'amazon, et grossièrement une stack technique classique, avec du store, de la validation, des bonnes pratiques dans tout les sens. Des sound effects cool, des technos assez chouettes, et des super animations avec du motions, des shaders et du three.js.
J'ai eu l'occasion de faire la traduction de l'app en Japonais dans la deuxième partie de la mission, et j'ai eu l'occasion de créer le générateur d'image à la volée pour les images de share d'application / choix de map in app. L'idée, c'était donc de généré en fonction du circuit, de la localisation, du nom et tout ça, une image qui représentait la course et donc une f1 dans une position particulière en suivant des photos de références. Le processus se basait sur la création d'une image unique qui représentait une course spécifique, en intégrant divers éléments tels que : Le circuit et la localisation. Le contexte visuel de la course (ex : la Tour Eiffel pour Paris, un paysage enneigé pour la Norvège). Une représentation d'une Formule 1 basée sur des photos de référence. Des titres et des informations dynamiques, dont la taille et le positionnement s'ajustaient automatiquement pour s'adapter à la longueur du texte.
La principale difficulté technique résidait dans la conception d'un algorithme capable de déterminer la taille et le positionnement des éléments typographiques de manière dynamique, en fonction de contraintes spécifiques, nécessitant l'utilisation de bibliothèques spécialisées.

Les technologies utilisées

icon-3d
(Next.js)
icon-3d
(React)
icon-3d
(Typescript)
icon-3d
(Tailwindcss)
icon-3d
(Amazonaws)
icon-3d
(Vercel)
icon-3d
(Three.js)
icon-3d
(Framermotion)
icon-3d
(Zustand)
icon-3d
(Zod)
icon-3d
(Webgl)

DÉVELOPPONS ENSEMBLE VOS PROJETS

Une idée, un projet ? Je suis là pour répondre à vos demandes et vous accompagner.
N’hésitez pas, je serais ravi d’échanger avec vous sur votre projet !
© 2025 Andy Cinquin - Tous droits réservés - Developed & Designed with ❤️ 🐝 ForHives co-founders