REFRY

Want to eat delicious food while saving money and maintaining a healthy lifestyle? Love eating out but also want to try out cooking at home? In just 2 clicks, REFRY can help!

Comment 4

Inspiration

REFRY was inspired by the prevalence of ordering quick, easy, but unhealthy food during this season of quarantine. We wanted to give people an accessible and easy way to find recipes or delicious local restaurants that are healthy and encourage sustainability.

However, eating at restaurants, although delicious, can often be costly especially as a struggling student. That's why we built REFRY to allow users to find new or existing favourite restaurants and obtain recipes for foods similar to what's on the respective restaurants' menus.

REFRY provides users with the ease of eating healthy, local, and for a low cost which overall encourages sustainability through reducing the millions of dollars of food waste from the food industry.

What it does

REFRY is a web application that encourages users to assimilate a healthier and more sustainable diet in two quick and easy steps.

  1. Use the search bar to find restaurant names, cuisine types, or any food that you are currently craving.
  2. View local restaurants and click on them to view a recipe sheet filled with recipes similar to what's on the menu.
  3. (Optional) Click the recipes to be brought to the full recipe online at various websites

How I built it

Both the front and back end of REFRY was developed with React with CSS and various libraries for design. We began by designing our UI using Figma and creating a wireframe to model the structure, layout, and direction of our web pages.

In the backend, we focussing on using two APIs - Zomato API and Edamam API - which allowed us to fetch restaurant and recipe data. We prototyped the interaction between the two APIs and our user interface by designing a simple react app.

After our frontend was finalized, we transferred the API implementations into our main repository and connect them together.

Finally, we adjusted the flow of the app, transitions, and debugged many rendering issues in conjunction with the APIs. Once we were satisfied with our product, we deployed our web app to Heroku.

Challenges I ran into

The biggest challenges we ran into were regarding the handling of data we fetched from the 2 APIs. Because we tried to merge two APIs that were outputting differently formatted data, we had to go through several trials of extracting various pieces from what was fetched and successfully passing it on to the other API. We also had to keep in mind how frequent our calls to the API were being made when testing because the free plan was quite restrictive and our keys were often restricted.

On top of that, rendering the images, labels, URLs, and many other components onto the pre-formatted cards on our interface was troublesome. We were unable to find a way to design the cards to maintain the aesthetic UI, therefore, with time as a concern, we simplify rendered the recipe attributes in a readable format.

Accomplishments that I'm proud of

As a group of hackers with very minimal to no prior experience with React, all of our group members can agree that generating a functional web app in itself was a big accomplishment for us. Regardless of our individual tasks, all our team members experienced a point throughout the 36 hours when we became stuck and felt helpless. Despite these struggles, however, we were able to troubleshoot together through millions of online tutorials and articles to create a satisfying product. Even if that meant that we had to discard some of our best ideas, we are all proud of what we were able to accomplish at the end of our time together!

What I learned

From our project, we learned a lot of practical information about developing a web app with React. Experiencing the language, from its limitations in functionality to its strength, gave a hands-on experience with React allowing us to develop a more thorough understanding of the process of web development as well as the various tools that come into play. We have also learned that even the simplest communication between the client and the server (such as pressing a button) can, and most definitely will, take a lot of work to implement correctly.

We also learned about various libraries in react that play a role in design, API requests, and features. Some of the libraries we used were:

  • react-router-dom
  • axios
  • uuid
  • redux and react-redux

Finally, we learned and experienced the Software Development Life Cycle (SDLC) and the Agile Software Development Process through separating the development process into steps, dividing up the work, and consistently collaborating to merge our tasks to create a final product.

What's next for REFRY

The biggest improvements we would make to REFRY is to refine its existing functionalities and UI before implementing any new features. We would look into different APIs to possibly find one that exports information in a format that is easier to work with, or one that uses a bigger database, brush up on the design of the website to be more user-friendly and more similar to our Figma prototype, etc. After that, we could consider adding alternative functionalities such as a user authentication page to save favourite recipes.

Built With

Share this project:

Updates