LIVE DEMO – Try Before You Buy!

Live Application: CookWithAI

User Demo Credentials:>

Email: webbuddy2024@gmail.com
Password: WebBuddy@123

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.

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.

CookWithAI - AI-Powered Recipe Generation Platform SaaS