MealApp
Project Overview
MealApp is a dynamic recipe web application built using Next.js and Tailwind CSS. The platform integrates with TheMealDB API to provide users with access to a wide range of recipes from different categories, ingredients, and regions around the world.
The main goal of this project was to demonstrate API-driven content rendering, structured routing architecture, and dynamic filtering logic within a modern React-based framework.
The application allows users to search, explore, and view detailed cooking instructions in an intuitive and responsive interface.
Pages Structure
The application consists of 9 structured pages:
Home – Overview and featured meals
Search Result – Displays dynamic results based on user query
Recipe Detail – Complete cooking instructions, ingredients, and metadata
Categories – List of meal categories
Category Detail – Meals filtered by selected category
Area – List of regions (origin of dishes)
Area Detail – Meals filtered by selected region
Ingredients – List of ingredients
Ingredient Detail – Meals filtered by selected ingredient
Core Features
Advanced Search Functionality
Users can search for specific meals, and results are dynamically rendered using API calls.
Category-Based Filtering
Allows filtering recipes by food category.
Area-Based Filtering
Users can explore dishes based on their country or region of origin.
Ingredient-Based Filtering
Recipes can be filtered based on selected main ingredients.
Detailed Recipe View
Displays complete meal instructions, ingredients list, and supporting information fetched from the API.
Technical Implementation
The application consumes TheMealDB REST API and dynamically renders data using Next.js routing system.
Dynamic routes are implemented for:
Recipe details
Category details
Area details
Ingredient details
The project leverages:
Next.js for structured routing and React-based rendering
Tailwind CSS for responsive and utility-first styling
API data fetching and asynchronous state handling
Component-based architecture for scalability
My Role
Independently designed and developed the application, handling:
API integration
Routing architecture
Dynamic filtering logic
UI implementation
Responsive design
