🧠 Project Overview
Chef AI is an AI-powered recipe generator web application that transforms user-provided ingredients into full, chef-style recipes using the OpenAI API. Built with React, Vite, and vanilla CSS, the app combines modern front-end development with real-time AI interaction to deliver a clean, responsive, and user-friendly experience.
🚀 Key Features
🍽️ AI-Generated Recipes – Users can input ingredients and receive complete recipes including preparation steps, cooking time, and detailed descriptions
🧠 Smart Prompting System – Carefully designed prompts ensure that the AI provides relevant, high-quality results with a natural tone
💾 Favorites System – Users can save and manage their favorite recipes using LocalStorage for persistent, offline access
📱 Responsive Layout – Fully responsive interface styled with custom CSS for smooth performance across desktop and mobile devices
⚙️ Dynamic React State – Efficient state handling using React hooks (useState, useEffect) for managing data flow and UI behavior
🛠️ Tech Stack
React (JSX) – Component-based architecture
OpenAI API – GPT-powered recipe generation
JavaScript (ES6+) – Front-end logic and dynamic rendering
CSS3 – Custom styling and responsiveness
HTML5 – Semantic structure for accessibility
Vite – Lightning-fast build and development environment
LocalStorage – Client-side storage for saving favorite recipes
📚 What I Learned
- Writing effective and structured prompts to guide AI behavior
- Managing persistent state with React and LocalStorage
- Building modular, reusable components and maintaining clean code architecture
- Designing responsive interfaces with pure CSS without relying on frameworks
🚫 Deployment Note
This project runs only in a local environment due to the use of a private API key and does not have a live public deployment.
