Kitchen Geek

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.

Features

Search and discover recipes

• Search for recipes by name, ingredient or through custom filters.
• Bookmark your favourite recipes in your own custom cookbook.

Adjust recipes to your liking

• 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)

Responsive experience

• Kitchen Geek is functional on mobile, tablet and desktop.

Installation

Server

Server download and instructions are found here. Without the server, this application will not work properly.

Client

1. Clone or download this project (Click the green code dropdown above).

  git clone https://github.com/Pensive1/KitchenGeek.git

2. Open your terminal and install NodeJS.

  npm install npm@latest -g

3. In your terminal or code editor, browse into the folder.

4. Install NPM to download the necessary packages

  npm install

Note: This project requires API details in a .env file. Send me an email for details, fill in the quotes then rename .env.example to .env.

5. Once complete, type npm start to start the app.

6. Enjoy 🙂

Tech Stack

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)

Roadmap

• 👤 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

---

Lessons Learned

This project was a great opportunity for me to stretch, hone and develop new skills.

Learnings

• Discovered React's {children} prop works similarly to Sass' @content content block feature.

• Spent 4 hours creating search parameter function. I later discovered React Router DOM has a built-in useSearchParams function 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)

Challenges

Time

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.

Search results (with parameters)

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.

Acknowledgements

• Spoonacular API (created by David Urbansky) – Without this API, you wouldn't discover all the recipes you know and love.

• Outfit font

• 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.