Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/juanpablodiaz/food-rapidapi
Consuming An API and Hide Your API Keys SAFELY in React
https://github.com/juanpablodiaz/food-rapidapi
cors environment-variables express fetch rapidapi react tailwindcss vite
Last synced: about 4 hours ago
JSON representation
Consuming An API and Hide Your API Keys SAFELY in React
- Host: GitHub
- URL: https://github.com/juanpablodiaz/food-rapidapi
- Owner: JuanPabloDiaz
- License: mit
- Created: 2023-11-25T23:09:33.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-06T21:35:57.000Z (7 days ago)
- Last Synced: 2025-02-06T22:29:44.660Z (7 days ago)
- Topics: cors, environment-variables, express, fetch, rapidapi, react, tailwindcss, vite
- Language: JavaScript
- Homepage: https://food-rapidapi.vercel.app
- Size: 1.09 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: license
Awesome Lists containing this project
README
# Food - RapidAPI
Food - RapidAPI is a project that allows you to search for food and recipes using the Edamam Food and Grocery Database API.
## Consuming An API and Hide Your API Keys SAFELY in React
This is a simple app that consumes an API using React, Vite and
Tailwind CSS.
The App is secured using a key I created in Rapid API. This API key is saved in a `.env` file and the data is fetched
from a backend server that I created using Node.js and Express.js.
Since the app is getting the data from a backend server, the app
is only working in localhost when the backend server is up and
running. Which means that the app is not working in production yet.
To view the project on localhost, you need to run the backend
server first. Running the backend server is easy. Just run the
command `npm run backend` in the terminal. Then, run the command
`npm run dev` to start the app.
## Food API
The best food API for your app, website or recipe using Edamam Food and Grocery Database.
### Built With 🔑
This project was developed using Rapid API, React, Vite and Tailwind CSS
[](https://www.w3schools.com/whatis/whatis_react.asp)
[](https://tailwindcss.com/)
## Content 🚦
This project was born as part of my effort to learn how to consume an API. In this case, how to consume Rapid API's.
[My Demo](https://food-rapidapi.vercel.app/)
[Food - RAPID API](https://rapidapi.com/edamam/api/edamam-food-and-grocery-database)
[Food and Grocery Database API](https://developer.edamam.com/food-database-api)
[Repo](https://github.com/JuanPabloDiaz/food-RapidAPI)
## License 📜
Distributed under the MIT License. See `LICENSE.txt` for more information.
## Projects 🚀
[](#)
[](https://github.com/JuanPabloDiaz/platzi/tree/main/2021)
[](https://github.com/JuanPabloDiaz/platzi/tree/main/2022)
## Courses & Certifications
For more information regarding my completed courses and certificates, please click on:
[](https://platzi.com/p/1diazdev/)
## Acknowledgments 📚
Resources list that I find helpful and would like to give credit to.
- [Rapid API](https://rapidapi.com/)
- [Edamam Food and Grocery Database Rapid API](https://rapidapi.com/edamam/api/edamam-food-and-grocery-database/)
- [Food and Grocery Database API](https://developer.edamam.com/food-database-api)
- [React](https://reactjs.org/)
- [Vite](https://vitejs.dev/)
- [Tailwind CSS](https://tailwindcss.com/)