Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/duncanbrewster/recipe-app
Type an ingredient and find recipes.
https://github.com/duncanbrewster/recipe-app
axios react rest-api styled-components
Last synced: 7 days ago
JSON representation
Type an ingredient and find recipes.
- Host: GitHub
- URL: https://github.com/duncanbrewster/recipe-app
- Owner: DuncanBrewster
- Created: 2022-02-11T00:23:32.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-04-21T17:31:22.000Z (over 2 years ago)
- Last Synced: 2024-06-22T10:26:14.578Z (5 months ago)
- Topics: axios, react, rest-api, styled-components
- Language: JavaScript
- Homepage: https://duncan-recipe-app.netlify.app
- Size: 164 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [Recipe Finder App](https://duncan-recipe-app.netlify.app/)
Recipe Finder is a React application that allows users to search the [Edamam database](https://www.edamam.com/) for recipes. This project is currently hosted on [Netlify](https://duncan-recipe-app.netlify.app/).
## Features
* Displays up to 20 recipes with each search query
* Allows users to route to different recipe sites
* Retrieves data from the Edamam API via Axios
* Is mobile and desktop friendly
## Installation
1. Clone this repository to your computer.
```bash
git clone https://github.com/DuncanBrewster/recipe-app.git
```
2. On the master branch, install the NPM dependencies.
```bash
npm install
```
3. This project requires a Edamam API key. Create an account at [edamam.com](https://www.edamam.com/) to get your key.
4. Create a .env file in your root directory.
```bash
touch .env
```
5. Inside your .env file, create a variable called REACT_APP_KEY and set it to your unique API key.
```bash
REACT_APP_KEY = yourUniqueApiKey
```
6. Open the project on a development server.
```bash
npm start
```
7. View the project in your internet browser at [http://localhost:3000](http://localhost:3000).
## Tools
This project:
* was built with **React**.
* uses **Axios** to fetch data from the Edamam API.
* is styled with **Styled Components**.
* [is hosted here on **Netlify**](https://duncan-recipe-app.netlify.app/).