This is a simple web app I built while learning React and APIs. The idea is pretty straightforward — you enter the ingredients you have, and the app suggests a recipe using AI.
- Lets users add ingredients one by one
- Sends those ingredients to an AI model (Hugging Face)
- Generates a recipe based on what you have
- Displays the result in a clean, readable format
- React (functional components + hooks)
- JavaScript (ES6+)
- Hugging Face Inference API
- Basic CSS
While building this project, I got hands-on experience with:
- Working with APIs in React
- Handling async/await and API responses
- Managing state and conditional rendering
- Debugging frontend issues (which took more time than expected 😅)
- Understanding why API keys shouldn’t be exposed in frontend apps
This project was built as part of my learning journey from FreeCodeCamp, and it really helped me understand how real-world apps connect to AI services.
Right now, the app calls the API directly from the frontend, which is fine for learning. But for production, I’d move the API calls to a backend to keep the API key secure.
- Add loading indicators and better error messages
- Improve UI/UX
- Add backend for secure API handling
- Support more advanced AI models
If you try it out or have suggestions, feel free to share!