ChefyAI - AI-Powered Recipe Generator

An AI-driven web app that instantly generates unique recipes using modern frontend tech and Puter.js database.

Click to zoom

ChefyAI: AI-Powered Recipe Generator

ChefyAI is a modern web application that generates delicious and personalized recipes instantly using AI.
Built with an intuitive interface and smooth animations, ChefyAI lets users generate ready-to-cook recipes with minimal input.

This project highlights my ability to blend AI capabilities with modern frontend development to deliver an engaging and efficient user experience.

---

What Users Can Do

• Instant Recipe Generation: Enter a prompt or idea and receive a custom AI-generated recipe
• Clear Instructions: Recipes include step-by-step guidance
• Fast, Responsive UI: Smooth interactive experience powered by Framer Motion
• Mobile-Friendly Layout: Works beautifully on phones and tablets
• No Backend Required: Fully client-side using Puter.js NoSQL database
• Visual Feedback: Clean icons and transitions for a delightful experience

---

Key Features

• AI Integration – Generate unique recipes using Puter AI API
• Interactive UI – Built with React & Tailwind CSS for fast interactions
• Framer Motion Animations – Smooth motion throughout the application
• Lucide Icons – Clean, modern iconography
• Client-Side Database – Uses Puter.js NoSQL for storing user interactions
• Vercel Deployment – Fast, globally distributed deployment

---

Why I Built This

• I wanted to make cooking easier and fun by leveraging AI
• There are many recipe apps, but few offer instant personalized recipes
• I aimed to blend AI, UX, and performance in a single elegant application
• Wanted to explore React animations and client-side database architecture

---

Tech Stack

Frontend

• React – Component-based UI logic
• Tailwind CSS – Utility-first styling
• Framer Motion – UI animations for fluid interactions
• Lucide Icons – Lightweight and expressive icons

Database & Deployment

• Puter.js NoSQL DB – Simple but powerful client-side data store
• Vite – Fast development and build tooling
• Vercel – Continuous deployment and hosting

---

Development Experience

Building UI with React

• Designed reusable components
• Focused on accessibility and responsive layouts
• Built real-time UI feedback for user actions

AI Workflow

• Connected the app with Puter AI API
• Ensured clean prompt inputs and fast results
• Managed loading states and error handling gracefully

Animation & UX

• Used Framer Motion to elevate UI responsiveness
• Added subtle animations for better user engagement

---

Impact & Results

• Live Deployment: Successfully deployed on Vercel
• User Engagement: Smooth recipe generation flow
• Minimal Dependencies: No backend server needed
• Scalable UI: Built with performance in mind

---

Future Enhancements

• User Accounts & Favorites
• Save & Share Recipes
• Diet & Cuisine Filters
• Image Generation for Recipes
• Offline Support with IndexedDB
• Analytics Dashboard for User Trends

---

Key Learnings

• AI-Integrated Frontend: Combining OpenAI-style APIs with React
• Client-Side DB: Leveraging Puter.js for simple state persistence
• Responsive & Animated UI: Using Framer Motion for polished interfaces
• Deploying Modern Web Apps: From local builds to production on Vercel