It's one thing to find recipes based on taste and diet. It's another to discover the recipe provide more or less portions than intended. In the end, you're left with leftover ingredients and wonder what other dishes can be made with them.
Kitchen Geek helps people discover recipes based on ingredients or additional filters. Adjust serving sizes and bookmark your favourite recipes.
- Search for recipes by name, ingredient or through custom filters.
- Bookmark your favourite recipes in your own custom cookbook.
- Easily recalculate serving sizes with the built-in portion calculator.
- Convert ingredients from imperial (US) to Metric (UK).
- View ingredients and instructions at a glance (available on tablet and desktop only)
- Kitchen Geek is functional on mobile, tablet and desktop.
Server download and instructions are found here. Without the server, this application will not work properly.
- Clone or download this project (Click the green code dropdown above).
git clone https://github.com/Pensive1/KitchenGeek.git- Open your terminal and install NodeJS.
npm install npm@latest -g-
In your terminal or code editor, browse into the folder.
-
Install NPM to download the necessary packages
npm installNote: This project requires API details in a
.envfile. Send me an email for details, fill in the quotes then rename.env.exampleto.env.
-
Once complete, type
npm startto start the app. -
Enjoy 🙂
Client: React, Sass, Javascript
Server: Node, Express, Knex.js, MySQL, Passport.js
Packages
- Axios
- dotenv
- Framer Motion
Tools
- Visual Studio Code
- Postman (Testing API endpoints)
- Figma (UI Design)
- Asana (for planning)
-
👤 User accounts and authentication
-
🧑🏽🍳 Scrape recipes from third party sites
-
⚡️ Interactive recipe instructions that dim/hide used recipes
-
🛒 Recipe shopping list
-
🥕 Recalculate a recipe portion based on a key ingredient
This project was a great opportunity for me to stretch, hone and develop new skills.
-
Discovered React's
{children}prop works similarly to Sass'@contentcontent block feature. -
Spent 4 hours creating search parameter function. I later discovered React Router DOM has a built-in
useSearchParamsfunction that does the same thing. -
Explored using variable fonts (thanks to Kevin Powell). This saved time defining multiple fonts and helped reduce file size.
-
I learnt how to create custom react modals (via Fireship).
-
Creating functional tabbed content component (via The Web School)
I had two weeks to develop this project. In between, students from all courses were involved in a 24hr industry hackathon.
After the deadline, we had three days to apply finishing touches to our projects for demo day.
I wasn't sure how to route the search results page to accept parameters after the main search query. After reading the React Router DOM documentation, I learned to use the asterisk (*) after results/ to accept all routes after it.
-
Spoonacular API (created by David Urbansky) – Without this API, you wouldn't discover all the recipes you know and love.
-
MingCute Icon Library – Also available for Figma.
-
Funny Doodle Pack – Used in error and loading states
-
My educators Sammy Abukmeil and Joe Di Trolio for introducing me to awesome web technologies, techniques, best practices, their guidance and for fostering a great environment to learn and ask questions over at BrainStation (London).
-
My bootcamp teaching assistant Adam Benhrima for showing me different ways to solve code problems, guidance, constructive feedback and inspiring me with his awesome JS one line solutions during morning challenges.