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.
- 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.
- TypeScript, React, Javascript, Axios, Chalk, Recipe Puppy API,
-
Fork this repository, then clone your fork of this repository.
-
Install dependencies using the
npm installcommand. -
Start the web server using the
npm startcommand. The app will be served at http://localhost:3000/. -
Start the proxy server using the
npm start:apicommand. The app will be served at http://localhost:3001/. -
Go to http://localhost:3000/ & http://localhost:3001/ in your browser.
- @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"