🥽 Test d'intégration front-end pour Mango3D
Merci de participer au test technique d'intégration front-end pour Mango3D.
Vous trouverez tout ce qu'il vous faut dans ce repository.
La consigne est simple : sur base des ressources présentes dans le repo et les fichiers graphiques dans le dossier gfx, réalisez l'intégration du design sur une page web, architecturée en composants react via typescript.
NOTE: notre objectif avec ce test est de jauger vos capacités techniques, vos méthodes et votre réactivité face à un projet. Nous avons essayé de faire au mieux pour vous proposez un projet court, pour ne pas trop accaparer votre temps.
L'entiéreté du site est statique, pas besoin de la mettre en ligne pour nous rendre votre production : faites simplement un fork du repo puis soumettez votre travail via une pull request.
Si vous avez la moindre remarque, note ou précision, utilisez les commentaires de la pull request pour nous les transmettre.
Pour faire tourner le projet en local, vous aurez juste besoin de node.js.
Une fois le projet cloné localement, lancez npm install (ou npm ci) pour installer les dépendances du projet.
Ensuite, lancez npm run work pour démarrer un serveur local webpack qui compilera votre code à la volée. Le résultat est accessible sur http://localhost:8000.
Si vous avez besoin d'installer de nouvelles dépendances pour réaliser ce projet, n'hésitez pas, faites comme chez vous (mais précisez-nous le pourquoi du comment dans votre pull request, c'est toujours bon à savoir).
Chez Mango3D, nous travaillons avec ESLint mais l'avons volontairement désactivé pour ce test.
Nous travaillons également avec Prettier, qui n'est pas activé par défaut, mais la configuration est inclue : lancez npm run prettier pour mettre en forme votre code à la demande.
Le code de base fourni est relativement clair et léger.
Le point d'entrée se trouve dans src/entries/app.tsx et votre page de travail est déjà préparée dans src/containers/pages/home.tsx.
Ă€ vous d'organiser vos composants dans src/components.
Les données à afficher dans les composants sont récupérées dans un Context, qui est défini dans src/core/contexts/data.tsx.
Dans le dossier gfx, vous trouverez le rendu final (final-render.png) et la charte graphique (visual-guidelines.png).
Les resources nécéssaires à la réalisation du projet sont déjà dans le dossier dist/images.
👉 les typos indiquées dans la charte sont déjà chargées depuis Google Font dans le
headdu template.
Lorsque la page est scrollée vers le bas et que le header sort du viewport, il passe en sticky comme présenté dans la charte.
La section What we do? présente un petit carousel - nous aimerions une animation des transitions comme celle présentée sur cette page.
Dans le context react, un handler nommé handleSubmitForm est présent pour envoyer le contenu de votre formulaire.
Si vous avez la moindre question, n'hésitez pas.
Un grand merci et bon travail !
