Re-Freshed
Recipe Finder
Coding project
PHP & SQL
Introducing Re-Freshed! Re-Freshed allows you to search up any ingredient, cuisine or category and get recipe results that correspond instantly. Moreover, this website provides the coding framework for search and filter queries on a SQL database with 40 recipes.
Roles:
UI Designer
Developer
Coding Languages:
HTML & CSS
PHP
SQL
Tools:
Figma
VSCode
Github
Timeline:
12 weeks
The Problem:
As a college student living away from home, I’ve picked up a new hobby: Cooking! More like a necessity…
So picture this, after a long and busy schedule, I’ve finally made it home. But I’m faced with a problem, “What should I have for dinner…?” Right. So now I have to look through the internet or social media for recipes when all I want is to just start and finish dinner as soon as possible. I also need to figure out what I can do with my miscellaneous ingredients so that they don’t go to waste.
WHAT IF I CREATE A WEBSITE THAT ALLOWS USERS TO FIND RECIPES THAT’S IN THEIR FRIDGE & CRAVINGS IN A SHORT AMOUNT OF TIME?
Project Overview:
As the new semester began, I was introduced to a new class project. Our objective became to create a website with a search and filter functionality over the course of 11 weeks, for recipes.
We had three checkpoints. We had to take our designs from wireframes, to HTML, and integrate it with PHP and a database
Alpha
Beta
Final
Design First:
Starting off with wireframes. Before designing, I narrowed down the different screens that I would need for this project: Homepage, Search Results, No Search Results, Recipe, Help. Bringing me to use Figma to layout my designs, I created different versions of layouts for these pages and ended up with these.
Green = Fresh!
During this stage, I also created the branding for Re-Freshed. Making sure that it had a design that resonates with anyone.
Logo
‘Re-Freshed’ which was inspired by my wish to have people use the website to find new recipes for their produce. The logo w/ a plate and fork/spoon was made was
Colors
As for the color palette, I went from a navy blue primary color and ended up with a beige and green color scheme. To me it made sense because green = fresh. So I thought it was the most fitting and appealing for a food focused site.
Typography
For typography, I scoured the internet for many different options, but I knew that I wanted the logo to be fun and the body text to be stylish but readable
HTML & CSS First:
Objective: Get all the HTML & CSS styling/layout, while maintaining responsiveness. It was key to keep in mind the inclusion of PHP with this design. Some things I looked out for was enclosing different sections of text in ‘div’ containers so that in the future it was easy to ‘call’ them out later on.
Alpha Screens:
Using PHP & SQL
The beginning of the hard part: incorporating PHP. Luckily if we got an error, it was bound to show up.
In order to do so, we had to work on developing the website locally, and then eventually uploading it to our school’s server so that other people can access it freely. Additionally, using the feedback from our Alpha versions, we also had to make sure it was fully responsive (especially on mobile), optimize our images, and of course, get it to work how we want it too.
Challenges:
Understanding how the search will work
Now I can imagine it like I’m skimming through each row and table of the database, but learning PHP’s version on how to do so was definitely a challenge. In the end, I realized it wasn’t so hard. Definitely a satisfying moment seeing all of my product cards for each recipe show up on my homepage.
Creating our SQL database
Since it was crucial for us to make sure that even if a recipe didn’t have specific words that people I added some categories to help. Such as the type of cuisine and if it contained meat/vegetables, and type of diet
Accomplished:
At this point, I was able to make a working search query that will look through my SQL database through every row and column in that row and will bring you to a new page with the searched results.
Wrapping up
Out-of-scope..
While my search query was working quite accurately, I also wanted to provide additional functionality to my site. Originally I had wanted to create a filter functionality on the search research page, to replicate more detailed results and narrow results down even more.
However, I decided against this functionality as my database was already limited with recipes and felt like it wouldn’t be as useful for users if they see no results with filters applied
To compensate !
Created CTA filtering buttons, that still serve similar functionalities, but these will update the cards on the home page with the corresponding category. I added the categories that I felt were the most important such as those that target different cuisines, diet, and type of ingredients included.
Welcome to Re-Freshed
How it works:
Users can use the search query on the Home page and type in phrase that they want to search to narrow down recipe results.
Key: More general produces more results, and try to keep it to one word if possible
Alternatively, they can scour through the ‘All Recipe’ section in the Homepage and use the filter buttons to immediately get recipes in that category
If they click on any recipe, it will load the necessary ingredients and steps for people to follow along as well as images
And that’s a wrap!
I’d say it’s a success!
Key Takeaways:
- Being able to learn a new coding language and launch a website in a matter of months was a great fleet on its own.
- The help of visualization in order to help me code was something I picked up while working on this project. It helped me grow my coding interpretation skills and problem solving
- Preparing ahead of time helped me later on. By creating specific columns in my database and knowing exactly how I was going to use they came helpful later on when I had to interpret the lessons and apply them to this project specifically
If I had more time:
- Would’ve loved to build out the filtering functionality on an existing array of results
- Expand the database more recipes to provide a even larger variety of results
Final Product:
Chloe Peng 