🍕 Taste Alchemist - Comprehensive recipe recommender and browser

A web app to search and browse recipes by categories. Presents recipe list in a scrollable consolidated manner. The ingredients and steps shown are very concise. Tasteful design, keeping simplicity and user experience in mind.

Tech Stack: ReactJS, Styled Components, React Router, Javascript, SwiperJS, CSS, HTML, and React Icons.

👉 Major Features

The core functionalities of the app:

• On the landing page, the user is greeted with a 'Today's Specials' and a 'Trending' recipe list.
• Wrote reusable components.
  • For display grid and recipe cards.
  • Saved the development time by removing the need to write the same code for each item.
• Fetched data is stored in local storage.
  • Of 'Today's Special' and 'Trending' lists.
  • Because they bring back the same response data.
  • To reduce the load time of future visits.
  • Saves the wastage of shooting GET requests every time.
• Ability to search for recipes using keywords.
• Ability to filter by four popular categories.
  • Chinese, Italian, Indian and American.
• Clicking on a recipe opens its details page.
  • References it from API end-point by its ID passed through URL params.
  • Details page includes ingredients, instructions, and relevant dietary tags of the finished product.
• Flexible scrollable area if the list overflows.
• Responsive design.
  • Switch smoothly between 16:9 desktop and 3:4 tablet screen sizes.

👉 Quality of Life and Design Features

Little details that cumulatively add to a great user experience:

• Tasteful duo color combination of green and purple.
• Filter buttons are made using a linear gradient of two tones of purple to give a glassy look.
• Easier navigation.
  • Filter button will show a white border representing the user's selected category.
• Inputted keywords auto-blanks upon search completion.
• Animated loader.
  • Appears when the app is in the process of data fetching.
  • Disappears as soon as data is ready to be displayed to the user.
• Auto-scrolling slider.
  • For 'Today's specials' and 'Trending' lists.
  • Slides at every small interval.
  • Loops back to the first one after reaching the end.
  • The user can interrupt the auto-sliding and can drag it instead.
• Recipe Details page.
  • Name, image, tags, and summary on the left column.
  • Ingredients and Instructions on the right column.
  • Easy to switch tabs for alternating between Ingredients and Instructions.
• Clicking on the logo navigates the user back to the home page.
• Custom thin scrollbar design matching the theme.
• Hovering over the recipe card will glow it.
• Custom favicon.
• Proper title of the web app.

👉 Colors Used

(Source: Imagination. I just named them whatever I wanted, because why not.) 🤷

Colors	Hex Code
Light Green	#b1e6cc
Dark Green	#73d673
Semi Dark Purple	#00b48a
Dark Purple	#2e1831
White	#ffffff
Silver	#c9c9c9

👉 Credits for Assets

Thank you very much 🙂

Assets	Name	Link
Favicon	Icons8	https://icons8.com/
Logo	Icons8	https://icons8.com/
Fonts	Google	https://fonts.google.com/
Loaders	Sam Herbert	https://github.com/SamHerbert/SVG-Loaders
API	Spoonacular	https://spoonacular.com/food-api

👉 More Screenshots

(Fig.1 - Search Bar)

(Fig.2 - Category Filters)

(Fig.3 - Homepage Slider)

(Fig.4 - Recipe Details)

(Fig.5 - Tabbed Details)

(Fig.6 - Scrollable Grid, if items overflows)

(Fig.7 - Tablet View)