https://github.com/suhakilic/ai-recipe

A Recipe App that suggests recipes based on the ingredients you have. Built with React, featuring serverless functions on Netlify to securely handle the Hugging Face API key. Practice project for React hooks (useState, useEffect, useRef) with a responsive design and recipe suggestions.
https://github.com/suhakilic/ai-recipe

ai huggingface javascript reactjs serverless-functions useeffect useref usestate

Last synced: 22 days ago
JSON representation

Host: GitHub
URL: https://github.com/suhakilic/ai-recipe
Owner: suhakilic
Created: 2025-02-11T20:32:51.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2025-07-18T15:12:57.000Z (11 months ago)
Last Synced: 2025-07-18T19:46:45.036Z (11 months ago)
Topics: ai, huggingface, javascript, reactjs, serverless-functions, useeffect, useref, usestate
Language: JavaScript
Homepage: https://suhacankilicairecipeapp.netlify.app/
Size: 209 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

# Recipe App

## Project Overview
This Recipe app allows users to input a list of ingredients they have, and the app fetches a recipe suggestion based on those ingredients using the Hugging Face API. The app uses modern JavaScript features like async/await and fetch to handle API requests efficiently. It is designed with a responsive layout to ensure it works seamlessly across different devices.

I practiced **React** in this project by utilizing hooks such as `useState`, `useEffect`, and `useRef` for state management and lifecycle handling.

To maintain security, sensitive API keys are handled via **serverless functions** deployed on **Netlify**. These functions interact with the Hugging Face API securely, keeping the API keys safe.

However, as the app is powered by serverless functions, sometimes the Hugging Face API response takes too long, and Netlify doesn't handle this correctly. In such cases, after clicking the "Get Recipe" button, the loading bar may show, but no recipe is returned. In these situations, users may need to click the button multiple times to get a recipe. This issue is currently not stable, but I hope to fix it in the future.

## Technologies Used
- **JavaScript (ES6+)**: The app uses modern JavaScript features, such as async/await and fetch, to handle API requests and responses efficiently.
- **React**: The app is built with React, using hooks like `useState`, `useEffect`, and `useRef` for managing component state and lifecycle.
- **Serverless Functions (Netlify)**: The app uses serverless functions deployed on Netlify to interact with the Hugging Face API securely and handle API keys in the backend.
- **Hugging Face API**: The app integrates with Hugging Face’s Mistral model to generate recipe suggestions based on the list of ingredients provided by the user.
- **CSS**: The app is styled using standard CSS with responsive layouts to ensure it looks good on all screen sizes.

## Features
- **Recipe Suggestion**: Users can input a list of ingredients, and the app suggests a recipe based on those ingredients using the Hugging Face API.
- **Responsive Design**: The app adapts to various screen sizes, providing a smooth experience on mobile, tablet, and desktop devices.
- **Serverless API Key Handling**: Sensitive API keys are securely managed through serverless functions, ensuring that the keys are never exposed to the client-side.
- **Modern JavaScript and React**: The app is built using ES6+ JavaScript and React, making the codebase clean, responsive, and easy to maintain.

## Known Issues
- **Inconsistent Recipe Fetching**: Due to the use of serverless functions and the time it takes for the Hugging Face API to respond, sometimes users may experience delays or failures in receiving a recipe. The loading bar may appear, but no recipe is returned. In such cases, users may need to click the "Get Recipe" button a few times before a recipe is generated. This issue is being investigated, and I hope to resolve it in future updates.

## Live Demo
You can access the live demo of the app here.
Test the app live here.

## App Screenshots