(Français en bas) As part of this project, I used React Vite, HTML, CSS, and JavaScript to create the front-end of my first MERN website, "Waagn Bi," which focuses on cooking. The site features a responsive design, ensuring it works seamlessly on various devices.
The CSS styling provides a timeless and subtle aesthetic with a white, cream, and brown hues palette. The website includes five main components: a versatile Navbar, a captivating Jumbotron, beautiful cards, intuitive modals, and containers.
There are six primary pages: the homepage, sign-up/login, food recipes, science insights, tips, and an Error 404 page. The homepage serves as a recipe hub, featuring a dynamic search functionality that allows users to explore various recipes by entering keywords like "chicken" or "pie." Each recipe is fetched via an API and displayed within cards, showing details such as origin, category, ingredients, and cooking instructions when selected.
The tips page offers a wealth of culinary wisdom through engaging articles, while the food science section explores the nutritional benefits of different foods. Authentication is securely handled through a back-end developed with MongoDB, Express.js, and Node.js, ensuring safe storage and verification of user data.
This MERN project showcases my technical skills and ignites my passion for continuous improvement. As I continue my programming journey, I am committed to refining and expanding this project to provide an even more enriching user experience.
(PS: You can find the back-end in another repository named backend_waagn_bi)
Dans le cadre de ce projet, j'ai utilisé React Vite, HTML, CSS et JavaScript pour créer mon premier site web MERN, "Waagn Bi", qui se concentre sur la cuisine. Le site est conçu de manière réactive, ce qui lui permet de fonctionner de manière transparente sur différents appareils.
Le style CSS offre une esthétique intemporelle et subtile avec une palette de teintes blanches, crème et brunes. Le site Web comprend cinq composants principaux : une barre de navigation polyvalente, un Jumbotron captivant, de belles cartes, des modales intuitives et des conteneurs.
Il y a six pages principales : la page d'accueil, l'inscription/la connexion, les recettes de cuisine, les connaissances scientifiques, les conseils et une page d'erreur 404. La page d'accueil sert de centre de recettes, avec une fonctionnalité de recherche dynamique qui permet aux utilisateurs d'explorer diverses recettes en entrant des mots-clés tels que "poulet" ou "tarte". Chaque recette est récupérée via une API et affichée sous forme de cartes, avec des détails tels que l'origine, la catégorie, les ingrédients et les instructions de cuisson lorsqu'elles sont sélectionnées.
La page de conseils offre une mine de connaissances culinaires grâce à des articles attrayants, tandis que la section consacrée à la science alimentaire explore les avantages nutritionnels de différents aliments. L'authentification est gérée en toute sécurité par un backend développé avec MongoDB, Express.js et Node.js, ce qui garantit la sécurité du stockage et de la vérification des données des utilisateurs.
Ce projet MERN met en valeur mes compétences techniques et attise ma passion pour l'amélioration continue. Alors que je poursuis mon parcours de programmation, je m'engage à affiner et à développer ce projet afin d'offrir une expérience utilisateur encore plus enrichissante.
(PS : Vous pouvez trouver le back-end dans un autre repository nommé backend_waagn_bi)