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.
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.
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.
(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 |
Thank you very much 🙂
| Assets | Name | Link |
|---|---|---|
| Favicon | Icons8 | https://icons8.com/ |
| Logo | Icons8 | https://icons8.com/ |
| Fonts | https://fonts.google.com/ | |
| Loaders | Sam Herbert | https://github.com/SamHerbert/SVG-Loaders |
| API | Spoonacular | https://spoonacular.com/food-api |
(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)