🍽 Recipe World

📑 Table of Contents

• 🚀 Quick Start
• 🗓 Project Duration
• ✨ Project Summary
• ⚙️ Key Features
• 🪄 Tech Stack & Tools
• 👀 Demo
  • Live Website
  • Mockup

🚀 Quick Start

1. Clone this repo: git clone https://github.com/hyeonahc/recipe-website.git
2. Move to the directory: cd <YOUR_PROJECT_NAME>.
3. Install packages: yarn install
4. Start project
   • Localhost: yarn start
5. Please contact [email protected] if you need an env key to run the project

🗓 Project Duration

Feb 22, 2023 - Feb 23, 2023 (2 days)

Timeline

• Feb 22, 2023: Develop main features
• Feb 23, 2023: Apply design and responsive design

✨ Project Summary

Recipe World is a recipe search website with obtained database from spoonacular API.

⚙️ Key Features

Main Feature

1. Search food recipes by cuisine
2. Display 5 food recipes matching a search word in one page with pagination
3. Read detailed information about the cuisine
   • Cuisine name and image
   • Health information(vegan, dairy-free and more)
   • A list of ingredients with measurements
   • Cooking instruction

Other

1. Responsive design for a mobile device size (600px)

🪄 Tech Stack & Tools

• Programming Language: React.js
• Router: react-router-dom v6
• State Management: Redux toolkit
• API: spoonacular API
• API Request: Redux toolkit requestApi, async await
• Style: MUI

👀 Demo

Live Website

Visit the live website on Netlify 🔗 https://welcometorecipeworld.netlify.app/

Mockup

Homepage	Homepage Mobile

Search Result Page	Search Result Page Mobile

Recipe Detail Page	Recipe Detail Page Mobile