Bountiful Allergy-Friendly Recipe Website
Inclusive and unique recipe site
Tools: VS Code, React-Bootstrap
Languages: JavaScript, HTML, CSS
Github: https://github.com/krembacz/FinalProject
Goal: An allergy-friendly recipe site with clear visuals and all CRUD operations
Feature List: Video hero banners, functioning search bar with search input, API CRUD operations on all recipes, sticky navigation with color-change on scroll, a randomized featured recipe on each refresh, clean pop-up modal for editing entries.
Deliverables: Hand-drawn wireframes, Functioning and coded website
Wireframes
Began the process with traditional wireframes for the home page in paper and ink. Feeling out the general design and feel for the website and how the layout will work. I knew that the hero banner would be videos to help liven up the site. The inclusion of a search bar or some method of filtering was necessary for the convenience of users with food allergies.
Coding
Coded in VSCode. A few important areas to note of the coding process was ensuring that files and folders are organized. Functional components are used and useEffect hooks to do CRUD operations and useState for site interactivity.
Final Website
The final site consisted of a clean and straightforward layout. All necessary details for a recipe are included and able to be added to an API. There are five navigable pages with one bootstrap modal. The navigation is sticky and changes color to black on scroll for readability.
Reflections and Considerations
This project was a passion project to test my capabilities in combining functional React code with solid design with my love for cooking and recipe sharing, all while being conscientious of my and others food allergies. If I had were to expand on the site, I would display more recipes on the home page below the featured recipe section. I would also add a few more features to the individual recipe pages, such as ingredients required in ounces vs. cups which could be toggled. Even including picture uploads for each steps as options for users.