Adrian BeceRecipe 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
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.
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:
Implementing Skeleton Loading in React
Adrian Bece for PROTOTYP ・ Sep 4 '19
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.
