Skip to content

TypeScript + React web app for optimizing recipes based on user health and fitness goals

Notifications You must be signed in to change notification settings

aviks4897/CalCart

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

22 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Recipe Health Optimizer & Smart Grocery Shopping Platform

A comprehensive web application that optimizes user-submitted recipes for health goals while finding the best prices for ingredients across multiple grocery stores. Built with Next.js 14, TypeScript, Prisma, and the Anthropic Claude API.

Features

  • 🍳 Recipe Management: Create and manage your favorite recipes
  • πŸ€– AI-Powered Optimization: Optimize recipes for your health goals using Claude AI
  • πŸ’° Price Comparison: Compare ingredient prices across multiple grocery stores
  • πŸ›’ Smart Shopping: Generate shopping lists with direct Instacart integration
  • πŸ“Š Nutrition Tracking: Detailed nutritional information for all recipes
  • πŸͺ Multi-Store Support: Find the best prices across different stores

Tech Stack

  • Framework: Next.js 14 with App Router
  • Language: TypeScript
  • Database: PostgreSQL with Prisma ORM
  • AI: Anthropic Claude API for recipe optimization
  • State Management: Zustand
  • UI Components: Radix UI + Tailwind CSS
  • Authentication: JWT-based auth system

Prerequisites

Before you begin, ensure you have:

  • Node.js 18+ installed
  • PostgreSQL database (local or cloud)
  • Anthropic API key (Get one here)

Getting Started

1. Clone the repository

git clone <repository-url>
cd alihacks

2. Install dependencies

npm install

3. Set up environment variables

Create a .env file in the root directory:

# Database
DATABASE_URL="postgresql://user:password@localhost:5432/recipe_optimizer?schema=public"

# Authentication
JWT_SECRET="your-secure-jwt-secret-at-least-32-characters-long"

# Anthropic API
ANTHROPIC_API_KEY="your-anthropic-api-key-here"

# App Configuration
NEXT_PUBLIC_APP_URL="http://localhost:3000"
NEXT_PUBLIC_USE_MOCK_API=true
NEXT_PUBLIC_ENABLE_PRICE_OPTIMIZATION=true

4. Set up the database

# Generate Prisma Client
npx prisma generate

# Run database migrations
npx prisma db push

# (Optional) Open Prisma Studio to view your data
npx prisma studio

5. Run the development server

npm run dev

Open http://localhost:3000 in your browser.

Project Structure

alihacks/
β”œβ”€β”€ app/                          # Next.js 14 App Router
β”‚   β”œβ”€β”€ api/                      # API Routes
β”‚   β”‚   β”œβ”€β”€ auth/                 # Authentication endpoints
β”‚   β”‚   β”œβ”€β”€ recipes/              # Recipe management
β”‚   β”‚   β”œβ”€β”€ grocery-list/         # Grocery list operations
β”‚   β”‚   β”œβ”€β”€ cart/                 # Shopping cart generation
β”‚   β”‚   └── instacart/            # Mock Instacart API
β”‚   β”œβ”€β”€ dashboard/                # Protected dashboard pages
β”‚   β”‚   β”œβ”€β”€ recipes/              # Recipe pages
β”‚   β”‚   β”œβ”€β”€ grocery-lists/        # Grocery list pages
β”‚   β”‚   └── stores/               # Store browsing
β”‚   β”œβ”€β”€ login/                    # Login page
β”‚   β”œβ”€β”€ signup/                   # Signup page
β”‚   └── page.tsx                  # Landing page
β”œβ”€β”€ components/
β”‚   └── ui/                       # Reusable UI components
β”œβ”€β”€ lib/
β”‚   β”œβ”€β”€ services/                 # Business logic services
β”‚   β”‚   β”œβ”€β”€ recipe-optimizer.ts  # Claude AI integration
β”‚   β”‚   β”œβ”€β”€ instacart-mock.ts    # Mock Instacart service
β”‚   β”‚   └── price-engine.ts      # Price comparison logic
β”‚   β”œβ”€β”€ stores/                   # Zustand state stores
β”‚   β”œβ”€β”€ auth.ts                   # Authentication utilities
β”‚   β”œβ”€β”€ db.ts                     # Prisma client
β”‚   β”œβ”€β”€ types.ts                  # TypeScript types
β”‚   └── utils.ts                  # Helper functions
β”œβ”€β”€ mocks/
β”‚   └── data/                     # Mock data for stores/products
β”œβ”€β”€ prisma/
β”‚   └── schema.prisma             # Database schema
└── public/                       # Static assets

Key Features Explained

Recipe Optimization

The application uses the Anthropic Claude API to intelligently optimize recipes:

  1. Submit any recipe with ingredients and instructions
  2. AI analyzes the recipe based on your health goals
  3. Suggests healthier ingredient substitutions
  4. Maintains the dish's identity and taste
  5. Provides detailed nutritional information

Price Comparison

The price comparison engine:

  1. Searches for all ingredients across multiple stores
  2. Compares prices in real-time
  3. Suggests the best single-store option
  4. Identifies multi-store savings opportunities
  5. Calculates delivery fees and minimum orders

Smart Shopping Lists

Generate consolidated shopping lists:

  1. Select multiple recipes
  2. Automatically consolidates duplicate ingredients
  3. Handles unit conversions (cups to tbsp, etc.)
  4. Groups items by category
  5. Creates deep links to Instacart for one-click checkout

API Endpoints

Authentication

  • POST /api/auth/signup - Create new account
  • POST /api/auth/login - Login
  • POST /api/auth/logout - Logout
  • GET /api/auth/me - Get current user

Recipes

  • POST /api/recipes/create - Create recipe
  • GET /api/recipes/list - List all recipes
  • GET /api/recipes/[id] - Get recipe details
  • POST /api/recipes/optimize - Optimize recipe with AI
  • DELETE /api/recipes/[id] - Delete recipe

Grocery Lists

  • POST /api/grocery-list/create - Create grocery list
  • GET /api/grocery-list/list - List all grocery lists
  • GET /api/grocery-list/[id] - Get list details
  • POST /api/grocery-list/prices - Fetch price comparisons

Shopping Cart

  • POST /api/cart/create-link - Generate Instacart deep link

Stores

  • GET /api/instacart/stores - Get available stores
  • POST /api/instacart/search - Search products

Database Schema

The application uses Prisma with PostgreSQL. Key models:

  • User: User accounts and profiles
  • UserProfile: Dietary preferences, goals, and restrictions
  • Recipe: Recipe data with ingredients and instructions
  • RecipeIngredient: Individual recipe ingredients
  • Nutrition: Nutritional information
  • GroceryList: Shopping lists
  • GroceryListItem: Items in a grocery list
  • PriceComparison: Price data from different stores
  • ShoppingCart: Generated shopping cart links

Development

Running Tests

npm test

Building for Production

npm run build
npm start

Database Management

# View database in Prisma Studio
npx prisma studio

# Create a new migration
npx prisma migrate dev --name your_migration_name

# Reset database
npx prisma migrate reset

Deployment

Vercel (Recommended)

  1. Push your code to GitHub
  2. Import project in Vercel
  3. Add environment variables
  4. Deploy

Environment Variables for Production

Make sure to set these in your deployment platform:

  • DATABASE_URL - Your production PostgreSQL URL
  • JWT_SECRET - A secure secret for JWT tokens
  • ANTHROPIC_API_KEY - Your Anthropic API key
  • NEXT_PUBLIC_APP_URL - Your production URL

Mock Data

The application includes mock data for development:

  • Products: 36 sample products across categories
  • Stores: 5 sample stores with realistic pricing
  • Instacart API: Fully functional mock API with realistic delays

Future Enhancements

  • Real Instacart API integration
  • Walmart and Kroger API integration
  • Meal planning calendar
  • Recipe sharing and community features
  • Mobile app (React Native)
  • Barcode scanning for pantry management
  • Advanced nutrition analytics
  • Recipe recommendations based on available ingredients

Contributing

Contributions are welcome! Please:

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Submit a pull request

License

MIT License - feel free to use this project for learning and development.

Support

For questions or issues, please open a GitHub issue.

Acknowledgments

  • Anthropic Claude for AI-powered recipe optimization
  • Radix UI for accessible component primitives
  • Tailwind CSS for styling
  • Prisma for database management

Built with ❀️ for healthier, more affordable cooking.

About

TypeScript + React web app for optimizing recipes based on user health and fitness goals

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 96.8%
  • JavaScript 2.5%
  • Other 0.7%