Harun Kestendžić

Smaller projects

Forkify

A recipe search app that talks to an online recipe API.

  • Built in the model-view-controller pattern: a model for the data, separate view classes for search, results, a recipe, pagination and bookmarks, and a controller that joins them.
  • Search results are shown ten per page with page buttons.
  • Recipes can be bookmarked, and a form lets you add your own recipe (it needs a personal API key, which is a placeholder in the code).
  • Styled with Sass and bundled with Parcel.

These follow the course material, so they show what I learned, not original designs.

Type
Web
What it is
Web, learning project
Built with
JavaScript, Sass, Parcel
Walkthrough: search, open a recipe, change the servings, bookmark it.
Forkify search results for pizza, shown as a list with a photo and publisher.
Search results for pizza.
A recipe at six servings with the bookmark button filled in.
Changing the servings rescales the ingredient amounts. The bookmark is filled in.
The bookmarks drop-down listing two saved recipes.
Bookmarks, kept in the browser.
The end of a results list with a Page 2 button, beside a recipe's ingredients and a Directions button.
Results come ten per page. Directions open the recipe's original site.