The Recipe App is a high-performance, dynamic web application designed for food enthusiasts to explore recipes from around the world. Built with modern frontend technologies, it provides instant access to ingredients, measurements, and step-by-step cooking instructions.
Check out the live application here: Recipe App Live
- Instant Search: Seamlessly search for any dish using the intuitive search bar.
- Real-time Data: Integrated with TheMealDB API to fetch the latest culinary information.
- Detailed View (Modal): A dedicated overlay for ingredients and instructions without leaving the page.
- Smart Ingredient Logic: JavaScript-based filtering that handles up to 20 ingredients dynamically.
- Fully Responsive: Optimized for Mobile, Tablet, and Desktop using CSS Flexbox and Media Queries.
- HTML5: Semantic structure for better SEO.
- CSS3: Custom styling, glassmorphism, and smooth transitions.
- JavaScript (ES6+): Async/Await, Fetch API, and DOM Manipulation.
- TheMealDB API: Powering the application with a vast recipe database.
⚙️ Installation & Setup To run this project locally, follow these steps:
Clone the repository:
Bash git clone https://github.com/BilalQadir247/Recipe-App.git Navigate to the folder:
Bash cd Recipe-App Open in Browser: Simply open index.html in your favorite web browser.
🧑💻 Developed By Bilal Qadir
GitHub: @BilalQadir247
Role: Frontend Developer & Online Academy Lead
├── index.html # Application structure
├── style.css # Custom styling and responsiveness
└── script.js # API fetching and dynamic rendering logic
---