J'ai eu le privilège de développer le site web pour le mariage de ma petite sœur, une tâche qui m'a permis de mettre en pratique mon expertise en développement web tout en contribuant à rendre ce jour spécial encore plus mémorable. Ce projet ambitieux a été l'occasion d'utiliser une gamme de technologies de pointe telles que Next.js, TailwindCSS, TailwindUI, HeadlessUI, et bien d'autres, y compris Midjourney pour les illustrations, offrant ainsi une expérience utilisateur sans pareille.
Conception et Planification Initiales
La première étape de ce projet a été la conception de maquettes avec Figma, permettant de visualiser l'aspect général du site et de ses fonctionnalités. Cette phase de planification a été cruciale pour aligner la vision du projet avec les attentes de ma sœur et pour s'assurer que le site reflète l'ambiance et le thème du mariage. Le design des éléments a été peaufiné à l'aide de Photoshop, Illustrator, et Adobe Firefly, enrichissant le site d'une esthétique visuelle personnalisée et engageante.
Développement avec des Technologies Modernes
Le développement du site a été réalisé en utilisant Next.js pour le framework front-end, bénéficiant de son architecture SSR (Server-Side Rendering) pour une performance optimale. TailwindCSS et TailwindUI ont facilité la mise en place d'un design responsive et élégant, tandis que HeadlessUI a permis d'intégrer des composants d'interface utilisateur accessibles sans compromettre le design personnalisé.
L'état global du site a été géré de façon efficace grâce à Zustand, simplifiant la gestion d'état sans la complexité des solutions plus traditionnelles. Pour les notifications, Toastify a été utilisé pour offrir une expérience utilisateur interactive et engageante, et Framer Motion a ajouté des animations fluides, rendant la navigation sur le site plus dynamique et agréable.
Déploiement et CI/CD
Le site a été déployé sur un serveur Contabo en utilisant Docker, ce qui a permis de créer un environnement isolé et sécurisé pour l'application. L'intégration continue et le déploiement continu (CI/CD) ont été mis en place via GitHub Actions, automatisant le processus de test et de déploiement pour garantir une mise en ligne fluide et sans erreur.
Optimisation et Accessibilité
Une attention particulière a été portée à l'optimisation du site, en utilisant des pratiques telles que le chargement paresseux des images et la minification des fichiers CSS et JavaScript, assurant ainsi des temps de chargement rapides et une expérience utilisateur optimale sur tous les appareils.
L'accessibilité a également été une priorité, en veillant à ce que le site soit utilisable et accessible à tous les invités, indépendamment de leurs capacités.
Conclusion
Le développement du site web pour le mariage de ma petite sœur a été un projet enrichissant, me permettant de combiner ma passion pour le développement web avec l'occasion de contribuer à un événement familial mémorable. Grâce à l'utilisation de technologies modernes et à une attention particulière portée à l'expérience utilisateur, le site a réussi à fournir toutes les informations essentielles sur le mariage tout en offrant une plateforme engageante et accessible pour les invités.
Ce projet a non seulement démontré mon aptitude à utiliser une variété de technologies de développement web de pointe mais a également souligné mon engagement à créer des solutions personnalisées qui répondent aux besoins spécifiques des utilisateurs, affirmant ainsi ma position en tant que développeur créatif et talentueux. J'espère que cet aperçu de mon travail inspirera et encouragera les lecteurs à explorer les possibilités infinies du développement web pour leurs propres projets ou événements.
