What I Built
MakeFud is an ultra-lean, zero-build web app built to transform scattered kitchen ingredients into wholesome, affordable home-cooked meals.
The Story: Cooking for Walid
I built MakeFud for my close friend Walid. Living on his own comes with a demanding routine, tight finances, and the daily grind of running a solo household. Time and again, the same routine played out: Walid would return home exhausted, open his fridge, stare blankly at a stray tomato, a couple of eggs, an onion, and some dry lentils, sigh, and shut the door.
When money is tight and energy is depleted, decision fatigue takes over. A few basic staples don't immediately feel like a complete dinner, making it tempting to skip the meal altogether or spend hard-earned cash on fast food.
Walid didn't need complicated cooking apps filled with 25-step gourmet recipes or exotic seasonings he couldn't afford. He needed a practical, reliable tool to turn what he already had into a nutritious, filling plate without the stress.
How MakeFud Solves It
MakeFud strips away the cognitive friction of cooking on a budget:
Ingredient-First Discovery: Walid simply types the items sitting on his shelf or counter (like egg, rice, or tomato). MakeFud instantly surfaces recipes prioritizing dishes that use those exact items with the fewest missing ingredients.
Transparent Missing Ingredients: Instead of surprising the user midway through prep, each recipe card clearly highlights what is already on hand versus the exact extra items required.
Zero-Cost Instant Sorting: Walid can sort recommendations client-side by preparation time (for quick dinners between tasks), calorie count (to ensure he gets sustained energy), or total ingredient count (to minimize cleanup and dishes).
Offline Mock Data: When mobile data is spotty or an API key isn't configured, a built-in demo mode provides offline pantry-friendly ideas without needing external accounts or credentials.
Demo
Live Deployment: https://tahaenasraoui-debug.github.io/makefud-app/
Local Run: Clone the repo and run python3 -m http.server, then open http://localhost:8000.
No-Key Demo Mode: The app includes a built-in mock dataset so anyone can test recipes immediately without signing up for third-party services.
Code
tahaenasraoui-debug
/
makefud-app
Zero-build web app that finds healthy recipes from whatever ingredients you have in your fridge. Built with vanilla HTML/JS and the Spoonacular API.
MakeFud 🍳
Empty fridge? Type what you have. Get recipes sorted by prep time, calories, or ingredient count.
MakeFud is a zero-build, ultra-lean web application that turns whatever ingredients you have left in your pantry or fridge into healthy, realistic meals[cite: 1, 3]. It minimizes food waste and takes the stress out of cooking on a budget or with limited time.
Preview
Features
- Fridge-to-Plate Matching: Enter whatever raw ingredients you have on hand to find recipes that maximize what you already own[cite: 3].
- Missing Ingredients Breakdown: In-browser fuzzy matching shows exactly which extra items a recipe needs[cite: 3].
- Zero-Cost Sorting: Instant client-side sorting by preparation time, calories per serving, or total ingredient count[cite: 3].
- Offline / Demo Mode: Ships with built-in mock recipes so you can run and test the app immediately without an API key or internet connection.
-
Zero-Build Architecture: Pure HTML, native CSS, and vanilla ES6+. No
npm…
The project is built with zero runtime dependencies and contains four primary files:
index.html – The complete, responsive single-page application built with semantic HTML, fluid native CSS with light/dark theme detection, and vanilla ES6+.
CONTRIBUTING.md – Clear ground rules, accessibility standards, and beginner-friendly issues for Hacktoberfest contributors.
DISCLAIMER.md – Nutrition and medical disclaimers, plus third-party API attribution guidelines.
LICENSE – MIT License.
How I Built It
To ensure Walid could pull this up on a cheap phone or slow connection instantly, I imposed strict design constraints:
Zero-Build & Zero-Dependency Stack: No bundlers, npm packages, or heavy UI frameworks. Everything runs directly in the browser via standard Web APIs.
Local Ingredient Fuzzy-Matching: Missing ingredients are calculated client-side by fuzzy-matching input tags against recipe components, saving quota and running with zero latency.
Dual Data Modes: Operates both with live queries to the Spoonacular API (delivering exact calorie counts and prep times) and a self-contained offline dataset of quick, budget-friendly pantry dishes.
Privacy & Security by Design: API keys live entirely in the user's localStorage and are sent exclusively to the upstream provider. All API-derived strings are sanitized before injection to prevent XSS.
Why Does Open Innovation Matter?
When software is built behind walled gardens or proprietary platforms, basic everyday tools get bloated with trackers, invasive subscription tiers, and paywalled features.
Open innovation makes essential utilities accessible to everyone. Because MakeFud is open-source and zero-build, someone in Walid’s exact shoes doesn't have to surrender their privacy or watch ads just to figure out how to cook an egg and a potato. Furthermore, anyone during Hacktoberfest can fork the repository, add staple toggles, improve ingredient pluralization, or introduce localized pantry ingredients without ever having to configure a compiler.
Prize Categories
Hacktoberfest Weekend Challenge: Build for a Friend
Team: Solo / None (Built independently by Mohamed Taha Enasraoui)
Top comments (1)
My bad I uploaded the image 3 times.