Refonte site Carnaval de Monthey

Next.JsTailwindTypescriptNexthAuth

Dimanche 21 juillet 2024

Le comité du Carnaval de Monthey souhaitait une refonte complète de leur site qui commençait à être un peu désuet (voir ci-dessus).
Il fallait d'abord retravailler l'identité graphique tout en gardant l'esprit de base du Carnaval.

Les différentes demandes et points d'intérêt spécifiés dans le cahier des charges :

  • Modernisation du site : il fallait un site qui soit aussi morderne technologiquement qu'au niveau de l'UI/UX.
  • Ajout d'un minishop : le souhait était de pouvoir vendre le livre ainsi que le journal du Carnaval également en ligne (il était vendu uniquement en physique).
  • Création d'un système pour les utilisateurs : création d'un système de "Communauté" permettant aux participants du Carnaval de participer à des jeux en réels permettant d'engranger des points sur le site.
  • Possibilité de modifications de contenu et d'ajout/retrait de sponsor : implémentation d'un petit CMS custom pour permettre aux admin de modifier eux même certains titres et contenus ains que de pouvoir ajouter des sponsors sur le carousel correspondant.

Les technologies choisies pour réaliser le projet sont des technologies modernes pour permettre un résultat réactif et agréable d’utilisation.

Dans les faits cela correspond à l’utilisation de NextJS, un framework JS basé sur React, avec Tailwind pour le frontend, et mongoDB pour le backend.

Ci-dessous est disponible une liste exhaustive de toutes les dépendances utilisées :

  • NextJS : Le Framework principal pour le site.
  • Typescript : JS avec vérification de types pour simplifier le dev.
  • Next-Auth : Gère l’authentification d’utilisateurs.
  • Zod : Verification du format des données.
  • Bcrypt : Chiffrement des mots de passes.
  • MongoDB et Mongoose : Base de données et liaison à cette dernière.
  • Sharp : Vérification et conversions d’images.
  • Stripe : Gestion de la boutique
  • Tailwind : Framwork CSS pour le visuel.
  • Reat-toastify : Notification utilisateur de type toast.
  • Fontawesome : Icon (logo de marque et icon de navigation).