Sometimes Envato’s live preview system temporarily breaks links. Please use the direct demo link with credentials mentioned below :

LIVE DEMO – Try Before You Buy!

Live Application: CookWithAI

User Demo Credentials:>

• Email: [email protected]
• Password:WebBuddy@123

How to Install Video Documentation:

• Link: https://envato.webbuddy.agency/docs

Overview

CookWithAI is a complete, production-ready web application that enables users to generate personalized recipes using artificial intelligence. Built with Next.js 15, React 19, and TypeScript, this application provides a seamless experience for creating unique recipes from available ingredients in seconds. The platform features a modern, responsive design and includes everything needed to run a recipe generation business, from user authentication to payment processing.

⚠️ Important: External API Costs Disclaimer

Please note that this application requires external API services to function, and you will incur costs based on your usage of these services.

This application integrates with several third-party services that charge fees based on usage:

• Google Gemini AI – Charges per API request for recipe generation. Costs vary based on the AI model used (gemini-2.5-pro) and the number of tokens processed. You pay directly to Google for each recipe generation request.
• Stripe – Charges a transaction fee of 2.9% plus $0.30 per successful payment transaction when users purchase credits.
• Supabase – Free tier available for development with 500MB database storage and 50,000 monthly active users. Production use may require a paid plan based on storage, bandwidth, and usage. Check Supabase pricing for current rates.

You are responsible for all costs associated with these external services. The purchase price of this application includes only the source code and does not include any API credits, service subscriptions, or usage fees. Before deploying this application, please review the pricing pages of all required services to understand the costs you will incur based on your expected usage volume.

While many services offer free tiers suitable for development and testing, production use will require paid plans. Ensure you have budgeted for ongoing API costs based on your expected user base and usage patterns.

Key Features

AI Recipe Generation

Generate personalized recipes using advanced AI models powered by Google Gemini AI. The application uses the gemini-2.5-pro model to create high-quality, unique recipes tailored to user ingredients and dietary preferences. Each recipe generation produces 3 different recipe options, each with complete ingredients lists, step-by-step instructions, cooking times, and dietary tags.

Dietary Preferences

Users can filter recipes by selecting from 10 dietary preferences to match their lifestyle and dietary needs:

• Vegetarian – Plant-based recipes without meat
• Vegan – Completely plant-based recipes without any animal products
• Gluten-Free – Recipes suitable for gluten-free diets
• Dairy-Free – Recipes without dairy products
• Keto – Low-carb, high-fat ketogenic diet recipes
• Low-Carb – Reduced carbohydrate recipes
• Paleo – Paleolithic diet-compliant recipes
• Low-Fat – Reduced fat content recipes
• High-Protein – Protein-rich recipes
• Nut-Free – Recipes without nuts or nut products

Ingredient-Based Recipe Creation

The application provides an intuitive interface for recipe generation:

• Add multiple ingredients – Users can input any ingredients they have available
• Ingredient management – Add or remove ingredients easily before generating recipes
• AI-powered matching – Google Gemini AI creates recipes using the provided ingredients
• Multiple recipe options – Each generation produces 3 different recipe suggestions
• Complete recipe details – Each recipe includes title, description, ingredients with measurements, step-by-step instructions, cooking time, and dietary tags

Recipe Management

Complete recipe management system with the following features:

• Recipe History – View all previously generated recipes
• Recipe Details – Full recipe view with complete instructions and ingredients
• Recipe Cards – Beautiful card-based display of generated recipes
• Recipe Storage – All recipes are saved to user’s account in Supabase database
• Recipe Browsing – Browse through recipe history with organized display

User Management

Complete user management system with the following features:

• User authentication powered by Supabase Auth (email/password)
• User profiles with recipe count and credit balance
• User dashboard for managing account and viewing statistics
• Recipe history tracking
• Credit balance management
• Secure session management with JWT tokens

Credit System

Flexible credit-based pricing system with three packages:

• Starter Credits – 200 credits for $9 (20 recipe generations)
• Creator Bundle – 600 credits for $18 (60 recipe generations)
• Kitchen Pro – 1200 credits for $29 (120 recipe generations)

All new users receive 10 free credits to test the platform (enough for 1 recipe generation). Each recipe generation consumes 10 credits regardless of the number of ingredients or dietary preferences selected.

Payment Processing

Integrated Stripe payment system for secure credit purchases. The application handles checkout sessions, webhook processing, and automatic credit allocation upon successful payment. All payments are processed securely through Stripe’s infrastructure.

Pages and Navigation

The application includes the following pages:

• Landing Page – Beautiful hero section with features, pricing, and call-to-action
• Home Page – Main recipe generation interface with ingredient input and dietary preferences
• Recipe Detail Page – Full recipe view with ingredients, instructions, and cooking details
• History Page – Browse all previously generated recipes
• Profile Page – User account management and statistics
• Subscription Page – Credit purchase and management
• Login/Signup Pages – Secure authentication flows

Technical Specifications

Technology Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• UI Library: Tailwind CSS
• Database: Supabase (PostgreSQL) with Row Level Security
• Authentication: Supabase Auth (email/password)
• Payments: Stripe with webhooks
• AI Integration: Google Gemini API (gemini-2.5-pro model)
• Notifications: Notistack for user feedback
• Icons: Heroicons React
• Fonts: Playfair Display (Google Fonts)

System Requirements

• Node.js 18 or higher
• npm or yarn package manager
• Supabase account and project
• API keys for required services (Google Gemini, Stripe, Supabase)

Deployment Options

The application can be deployed on:

• Vercel (recommended for easy deployment with Next.js)
• AWS EC2 (for more control and custom server configuration)
• Any Node.js hosting platform that supports Next.js

API and Service Requirements

To run this application, you will need to create accounts and obtain API keys from the following services. Some services offer free tiers suitable for development and small-scale production use.

Required Services

Google Gemini AI

Google Gemini AI provides the AI models for recipe generation. You will need to create an account at Google AI Studio and obtain an API key. Pricing is based on API usage, and you pay per recipe generation request. The application uses the gemini-2.5-pro model. Check Google Gemini AI pricing for current rates.

Supabase

Supabase handles user authentication, database storage, and user management. The free tier includes 500MB database storage, 50,000 monthly active users, and 2GB bandwidth. Paid plans start if you exceed the free tier limits. Visit Supabase pricing page for detailed pricing information.

Stripe

Stripe processes credit card payments for credit purchases. Stripe charges a transaction fee of 2.9% plus $0.30 per successful transaction. There are no monthly fees for standard accounts. Visit Stripe pricing page for complete fee structure.

Installation and Setup

The application includes comprehensive HTML documentation covering:

• Environment variable configuration
• Supabase database setup and migration SQL
• Supabase authentication setup
• Google Gemini API configuration
• Stripe payment setup and webhook configuration
• Deployment guides for Vercel and AWS EC2
• Frontend customization guide
• Pricing and credit configuration
• User guide and feature documentation

All setup instructions are provided in HTML documentation files included with the purchase. The documentation includes step-by-step guides with screenshots and code examples.

What’s Included

• Complete Next.js 15 application source code
• TypeScript source files
• All UI components and styling (Tailwind CSS)
• API routes: recipe generation, history, recipe details, credits, profile, initialize-credits, Stripe checkout, payment verification, and webhooks
• Database schema and migration SQL scripts
• Supabase authentication integration
• Stripe payment processing integration
• Google Gemini AI integration
• Comprehensive HTML documentation
• Environment variable templates
• Deployment configuration files
• Error handling and validation
• Credit management system
• Recipe history and storage

Customization

The application is fully customizable:

• Modify credit package pricing and amounts
• Adjust credit cost per recipe generation (default: 10 credits)
• Customize dietary preferences list
• Modify AI prompts for recipe generation
• Change color schemes and branding
• Modify UI components and layouts
• Add custom features and functionality
• Customize recipe display format

Support and Updates

This is a complete, production-ready application. The code follows Node.js best practices and Envato submission requirements. All code is well-structured, documented, and ready for deployment. The application includes comprehensive error handling, input validation, and secure authentication mechanisms.