Case Study
FORKIFY — Recipe Search Engine
Forkify Recipe Tracker
SearchPreviewProject Purpose
A recipe search engine that lets food lovers discover, bookmark, and scale recipes from over 1 million dishes. Built as a vanilla JS SPA using the MVC pattern, it demonstrates that complex app architecture does not require a heavy framework.
Tools & Technologies
Key Features
Ingredient Proportion Scaler
Dynamic calculations for ingredients when user adjusts serving sizes on the fly.
Local Storage Bookmarks
Instant bookmarking without registration, persistent across browser sessions.
Pure MVC Architecture
Clean decoupling of model data, view renderers, and pub-sub controller logic.
App Screens
01Search
Recipe Discovery Engine
Search over 1 million recipes from the Forkify API with instant results. Results are paginated and sorted by relevance, with rich preview cards showing cook time, servings, and source.
Problems & How We Solved Them
State management without a framework
Designed a clean MVC architecture with a centralised state object and pub/sub event system. Every UI change is triggered by a state mutation, making the app predictable and easy to debug without React or Vue.
Outcomes
0
Recipes available
0
Monthly users
0
User rating
0
Completion