adamm13 / recipe-finder

A Recipe Finding App that uses the Recipe Puppy API to return recipes and ingredients.

Recipe Finder

This App was built to practice using TypeScript and React. It uses axios in a proxy server to call the Recipe Puppy API to return the queried results. This tutorial explained how TypeScript can be used in react to write cleaner, less buggy code by using custom TypeScript Interfaces.

---

Screenshots

---

Features

• Simple search bar which returns recipies based on user input
• Individual recipe cards feature the ingredients needed and a link to the external recipe website.

---

Tech Used

• TypeScript, React, Javascript, Axios, Chalk, Recipe Puppy API,

---

Installation

1. Fork this repository, then clone your fork of this repository.

2. Install dependencies using the npm install command.

3. Start the web server using the npm start command. The app will be served at http://localhost:3000/.

4. Start the proxy server using the npm start:api command. The app will be served at http://localhost:3001/.

5. Go to http://localhost:3000/ & http://localhost:3001/ in your browser.

---

Dependencies

• @testing-library/jest-dom": "^5.11.9"
• @testing-library/react": "^11.2.5"
• @testing-library/user-event": "^12.8.1"
• @types/jest": "^26.0.20"
• @types/node": "^12.20.4"
• @types/react": "^17.0.2"
• @types/react-dom": "^17.0.1"
• axios": "^0.21.1"
• chalk": "^4.1.0"
• react": "^17.0.1"
• react-dom": "^17.0.1"
• react-scripts": "4.0.3"
• typescript": "^4.2.2"
• web-vitals": "^1.1.0"