Introduction

Foodie - A Food Recipes SPA with Next.js, React, TypeScript & Tailwind CSS.

Foodie Link - https://foodie-recipes.vercel.app

Demo

demo.mp4

Features

• Search Functionality: Search through 200+ recipes.
• Detailed Recipe Information: View detailed recipe information with steps, ingredients and video tutorial.
• YouTube Video Integration: Watch YouTube videos related to recipes.
• Step-by-Step Instructions: Follow clear, step-by-step instructions for each recipe.
• Bookmarking: Bookmark your favorite recipes for later easy access.
• Responsive UI: Enjoy a fully responsive user interface for seamless use across devices.

Search Recipes

Bookmark Recipes

Saved Bookmarked Recipes

Installation

1. Clone the repository git clone https://github.com/bhupindersingh007/foodie.git or download zip.
2. Open the directory foodie in the terminal.
3. Install node dependencies npm install.
4. Make a new .env file and copy .env.example file to .env.
5. Specify .env variables like API_URL and API_KEY.
6. Run npm run build to build the application and npm run dev to start the development server.

Things Used

• Next.js v14 - The React Framework for the Web.
• React v18 - The library for web and native user interfaces.
• TypeScript v5 - TypeScript is JavaScript with syntax for types.
• Feather Icons - Simply beautiful open source SVG icons.
• TheMealDB API - An open, crowd-sourced database of Recipes from around the world.
• Tailwind CSS - A utility-first CSS framework.