Chapéro
Bar à chats sur Bordeaux
chapéro
Bar à cocktails
Ce projet a été réalisé dernièrement pendant mon cursus à Ynov. Mon équipe et moi-même sommes fiers de vous présenter Chapéro 🍹
Il s’agit d’un bar proposant une multitude de cocktails, des plus classiques aux plus atypiques. Cependant, tout en sirotant ce nectar des plus goûtus, vous serez plongés dans une atmosphère toute particulière ! Car c’est dans une ambiance des plus félines que vous serez amené à déguster nos boissons. Vous tomberez sous le charme de nos amis félins (chats) que vous aurez la possibilité d’adopter ! 🐈
Une communauté
Les chaperlipopettes (nom de notre communauté) auront la possibilité de créer leurs propres cocktails ! Et de voter à la fin du concours pour le meilleur 🏆 ! Si vous aviez voté pour le cocktail qui a gagné ou que vous êtes le grand gagnant, vous récoltez des patounes (ce sont nos points de fidélités). Plus vous aurez de patounes, plus il y aura de surprises pour vous (et pour les félins 👀). Vous augmenterez ainsi de grade (et pourquoi pas devenir une effigie importante de Chapéro 😻). Vous pouvez même gagner des patounes en faisant des dons à Chapéro ! Grâce à ces dons, nous pourrons acheter toujours plus de jouets pour nos petits démons !
direction artistique
Mise en place de l’univers
Je me suis chargé de la mise en place de l’univers de Chapéro. Je suis parti sur plusieurs ébauches pour la création d’un logo impactant pour notre bar à chats, avec bien évidemment l’optique de mettre en avant notre concept « chat » & « bar ». Après plusieurs propositions, notamment le « Yin Yang » (sur le croquis), nous avons sélectionné celle où le chat se confond avec le verre à vin. De là, j’ai pu partir sur l’élaboration de la charte graphique. On va ainsi y retrouver les couleurs, les typographies, les déclinaisons du logo ou bien encore le type de photo que l’on peut utiliser. Charte graphique qui a pu mettre les différents codes à respecter pour la conception des futurs supports de la marque.
Puis il a fallu maquetter les différentes pages de notre site web, cela a pu être fait en passant par différentes étapes, telles que les wireframes ou bien encore l’arborescence. Etant donné le délai cours de livraison pour le projet, uniquement le maquettage de la version mobile a été faite (mobile first dans notre cas) 📱
Puis il a fallu maquetter les différentes pages de notre site web, cela a pu être fait en passant par différentes étapes, telles que les wireframes ou bien encore l’arborescence. Etant donné le délai cours de livraison pour le projet, uniquement le maquettage de la version mobile a été faite (mobile first dans notre cas) 📱
développement front
Création de l’application
L’étape primordiale de ce projet a été de développer l’application grâce aux maquettes précédemment réalisé sous Figma. Une partie de l’équipe s’est occupée de créer le back-office (API) pendant qu’une autre s’est occupée du front 🤝
Nous travaillons en méthode agile (daily, rétrospective, poker planning, …), nos différentes tâches (User Stories) étaient organisées selon de (très) courts sprints (1 semaine par sprint, sur 4 sprints au total). Nous avons mis en place l’application front (React / TypeScript) avec un système de traductions (i18n) et les appels API fonctionnaient grâce à axios. Le tout a était versionné sur GitLab (MR, Pipelines, ESLint, Prettier, …).
Une grande partie du temps a été consacré à la réalisation des composants de notre application. Une fois fait, il a été rapide de mettre en place les différentes pages puisqu’il ne fallait plus qu’assemblait les composants entre eux ! (et y mettre la logique bien-sûr 😅).
Nous travaillons en méthode agile (daily, rétrospective, poker planning, …), nos différentes tâches (User Stories) étaient organisées selon de (très) courts sprints (1 semaine par sprint, sur 4 sprints au total). Nous avons mis en place l’application front (React / TypeScript) avec un système de traductions (i18n) et les appels API fonctionnaient grâce à axios. Le tout a était versionné sur GitLab (MR, Pipelines, ESLint, Prettier, …).
Une grande partie du temps a été consacré à la réalisation des composants de notre application. Une fois fait, il a été rapide de mettre en place les différentes pages puisqu’il ne fallait plus qu’assemblait les composants entre eux ! (et y mettre la logique bien-sûr 😅).
