A beautifully designed Food Menu Application built with Next.js, TypeScript, and TailwindCSS, where users can explore various food categories, view meal details, and filter their choices seamlessly.
A clean and modern design for desktop users:
Perfectly scales for tablets and mid-sized devices:
Fully responsive and optimized for mobile devices:
Check out the live application here: Just Food
🗂️ Dynamic Categories: Browse food categories fetched dynamically from an API.
🥗 Filter Options: Interactive filter to refine the displayed categories.
📜 Meal Details: Detailed view of each meal, including ingredients and instructions.
🌐 Responsive Design: Fully responsive UI for mobile, tablet, and desktop devices.
🎨 Styled with TailwindCSS: Clean and modern UI powered by TailwindCSS.
⚡ Optimized Performance: Built using Next.js 14 and App Router.
Framework: Next.js 14
Styling: TailwindCSS
TypeScript: For strong typing and better developer experience.
Axios: For fetching data from the TheMealDB API.
Follow these steps to set up the project locally:
1.Clone the repository:
git clone https://github.com/your-username/just-food.git
cd just-food
2.Install dependencies:
npm install
3.Run the development server:
npm run dev
4.Open the app in your browser:
http://localhost:3000
This project uses the TheMealDB API to fetch:
Categories: /categories.php
Meals by Category: /filter.php?c={category}
Meal Details: /lookup.php?i={mealId}
🌻 Azadeh Sharifi Soltani
Feel free to contribute to this project by submitting a pull request or opening an issue! Made with 💻, ☕, and 🌻 by Azadeh Sharifi Soltani