The pickypicks home page.
After moving to the next page, users have the option to input ingredients in a text field.
After entering "apple" in the ingredients input field and selecting the "Get Recipe!" button.
After scrolling down the page, the full recipe cards containing apple can be seen.
After entering both "shrimp" and "chicken" and selecting the "Get Recipe!" button.
After entering the maximum 3 ingredients ("apple", "shrimp", and "chicken") and selecting "Get Recipes!".
Our idea started out with a friend talking about how they wanted to try more foods, but always ended up sticking to the ingredients they like. We wanted to create a tool that would help them explore new foods in a fun way, while also using their favourite ingredients to create these dishes.
What it does
pickypicks is a web application that lets you input up to 3 ingredients and randomly pulls 3 recipes that include at least one of those ingredients, displaying them in cards (just like Grandma's box of recipe cards). The names of the dishes are displayed along with their ingredients, an image, and a URL to the full recipe. By showing users snippets of randomized recipes that include their favourite food items, pickypicks helps people to expand their culinary horizons and try new dishes, diversifying their palette in a healthy way while still enjoying their favourite flavours.
How we built it
Before we actually began coding the application, we designed a prototype in Figma to plan out the look of the application's pages and the feel of the UI elements' interactions. We used Canva to create custom graphics for the home page to add a more polished feel. After testing the prototype and deciding on the look, we began working on the actual application.
Challenges we ran into
The first challenge we ran into was while we were initially setting up the React project. During setup, we discovered that the latest version of the Create React App environment had linting issues. This caused a minor setback when we had to troubleshoot and roll our project back to an earlier version, so we began truly hacking later than expected. Despite this delay, we worked hard to catch up and completed the application on time!
One of the other major challenges we had was when image links pulled from the JSON database were broken. We spent some time discussing how to handle this issue, since we wanted each recipe card to have its own image. After taking the time to research how to handle image errors, we decided to replace any broken images with a default sandwich icon.
In addition, the last step was to deploy our application to be accessed from the domain.com url we purchased, pickypicks.tech. However, we ran into some application errors when deploying our application and due to time restraints, we decided to leave this as a future problem to solve.
Accomplishments that we're proud of
Overall, we're proud that we completed this project within the time limits without experiencing any major roadblocks! While the project still has some bugs, we were able to finish all of the app's core features. We're also proud that we made the app look more polished and visually appealing, since this is something we didn't pay as much attention to for past hackathon projects.
What we learned
We learned how to parse and query a database/JSON file from a web application, which was something that neither of us had attempted before. Another big skill we learned was how to build a functioning web app from a Figma prototype, and we learned that creating an early design prototype really streamlines the workflow throughout the rest of the project. We also learned more about React in general.
What's next for pickypicks
In the future, we would love to add another feature that allows users to choose ingredients that they don't like, instead of just ingredients that they love. This feature could select recipes that exclude the specified ingredients. It would also be cool if users could combine this feature with the current ingredients feature, allowing them to find recipes with a combination of ingredients that's more unique to their tastes.
We also thought of adding user accounts to the application so that certain recipes could be "favourited" or saved. If users had their own accounts, they could access a favourite recipes list to refer to in the future, making it easy to keep track of which new recipes they tried and loved the most. Lastly, we would want to make the application more robust and use a more up-to-date database. Currently, some recipes contain broken URLs or images due to the links being old.
Overall, we plan to improve pickypicks so that it can be a real, useable, and fun tool for people who want to expand their favourite recipes.