loading...
Cover image for ShowDEV: Food recipe web app with diet, health and nutrition info

ShowDEV: Food recipe web app with diet, health and nutrition info

adrianbdesigns profile image Adrian Bece ・2 min read

Recipe Magic is a web app that uses Edamam API that allows users to search through massive recipe database, filter recipes by various attributes (diet, health, ingredients, etc.) and displays nutritional and health data.

Website link: Recipe Magic

Alt Text

Alt Text

Tech info

  • React (with Hooks)
  • Typescript
  • Redux (with Hooks)
  • react-app-rewired (instead of ejecting)
  • react-router
  • animejs
  • PostCSS (with postcss-preset-env)
  • Edamam API
  • Netlify hosting

Challenges

Restrictive API

Edamam API is awesome, but also very restrictive towards free users. It allows free users only 5 requests per minute, so I needed to implement a mechanism that will restrict users to 1 request every 12 seconds.

Alt Text

Skeleton Loading

Most data is being loaded dynamically (recipe lists, recipe details, etc.), so having spinners everywhere seemed as a quick-and-dirty solution. Not to mention that it provided terrible UX.

Since the data is highly predictable, I've decided to implement skeleton loading or skeleton screens. I've written a short tutorial on implementing it here:

Delightful Animations

I also wanted to create a delightful UX, not only using CSS but also JS animations. I've used animejs to create simple animations to give the site more personality.

Work in progress

Although this project is pretty much feature-complete, there are still some rough edges and code cleanups that I need to do.

Let me know what you think about the project, feel free to let me know if you have any ideas for improving the app.


Thank you for taking the time to read this post. If you've found this useful, please give it a ❤️ or 🦄, share and comment.

Discussion

pic
Editor guide
Collapse
vikramchandra profile image
Vikram Sharma

Hi Adrian. Nice coverage of the topic. How APIs make live of us developers easier. I am creating a side project which is a recipe web app for Jain Food. Unfortunately I had to sift through multiple recipe apis to get a decent number of recipes. Check out this list of recipe api. You may find it useful.

Collapse
chrismane profile image
chrismane

Not bad at all. This is the second article I’m really interested this year. Is this based on your personal studies or experience? This year I have made the decision to lose weight because of beer belly and my face is rounded plus my neck looks shorter. It’s okay but at my age it’s not a problem to be fit and look cool, so for that I use everything from modernfit.com/programs/noom/the-on... and their advices work pretty well. Of course, I put some small goals at the beginning and by time I see improvements and motivation. Hardest was of course with food, to lay down on half-empty stomach and have each meal with 20% empty space. It was worthy guys! Move forward, don’t stop.