• Townie
    AI
  • Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
connnolly

connnolly

cardamom

Unlisted
Like
2
cardamom
Home
Code
7
.cursor
1
backend
3
frontend
3
shared
2
.vtignore
README.md
deno.json
Branches
2
Pull requests
Remixes
History
Environment variables
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
README.md
Code
/
README.md
Search
6/22/2025
Viewing readonly version of main branch: v198
View latest version
README.md

Recipe Parser App

A mobile-friendly web application that captures, parses, and stores recipes from multiple sources including URLs, PDFs, images, and plain text.

Features

  • Multi-source Recipe Input: Accept recipes from:
    • Web URLs (recipe websites)
    • PDF files
    • Images (photos of recipes)
    • Plain text input
  • Intelligent Parsing: Automatically extracts:
    • Dish title and description
    • Ingredients with precise quantities and units
    • Step-by-step cooking instructions
    • Cooking metadata (prep time, cook time, servings, difficulty)
    • Recipe tags and source information
  • Mobile-Friendly: Responsive design optimized for mobile devices
  • Recipe Storage: Persistent SQLite storage with full CRUD operations
  • Recipe Management: View, edit, delete, and organize saved recipes
  • Advanced Features:
    • Recipe filtering and search
    • Fraction-to-decimal conversion for precise measurements
    • Comprehensive error handling and validation
    • Real-time parsing feedback

Tech Stack

  • Frontend: React 18.2.0 with TypeScript, TailwindCSS
  • Backend: Hono API framework with TypeScript
  • Database: SQLite with normalized schema (recipes + ingredients tables)
  • AI: OpenAI GPT-4o-mini for intelligent recipe parsing
  • File Processing:
    • PDF parsing via unpdf library
    • Image OCR via OpenAI Vision API
    • URL content extraction

Project Structure

├── backend/
│   ├── database/
│   │   ├── migrations.ts    # Database schema
│   │   └── queries.ts       # Database operations
│   ├── routes/
│   │   ├── recipes.ts       # Recipe CRUD operations
│   │   └── parse.ts         # Recipe parsing endpoints
│   └── index.ts             # Main API entry point
├── frontend/
│   ├── components/
│   │   ├── App.tsx          # Main app component
│   │   ├── RecipeForm.tsx   # Recipe input form
│   │   ├── RecipeList.tsx   # Recipe listing
│   │   └── RecipeView.tsx   # Individual recipe display
│   ├── index.html           # Main HTML template
│   └── index.tsx            # Frontend entry point
└── shared/
    └── types.ts             # Shared TypeScript types

API Endpoints

Recipe Management

  • GET /api/recipes - Get all recipes (supports filtering via query params)
    • ?search=term - Search in recipe titles and descriptions
    • ?difficulty=easy|medium|hard - Filter by difficulty
    • ?maxPrepTime=minutes - Filter by maximum prep time
    • ?maxCookTime=minutes - Filter by maximum cook time
    • ?tags=tag1,tag2 - Filter by tags
  • POST /api/recipes - Save a new recipe
  • GET /api/recipes/:id - Get specific recipe by ID
  • PUT /api/recipes/:id - Update existing recipe
  • DELETE /api/recipes/:id - Delete recipe

Recipe Parsing

  • POST /api/parse/url - Parse recipe from web URL
  • POST /api/parse/pdf - Parse recipe from PDF file (base64)
  • POST /api/parse/image - Parse recipe from image (base64)
  • POST /api/parse/text - Parse recipe from plain text

Utility

  • GET /api/health - Health check endpoint
  • GET /api/test-delete - Test endpoint for debugging delete operations

Usage

  1. Access the App: Open the application in your browser
  2. Add Recipes: Choose from multiple input methods:
    • URL: Paste a recipe website URL
    • PDF: Upload a PDF file containing a recipe
    • Image: Upload a photo of a recipe
    • Text: Paste or type recipe text directly
  3. Review & Edit: The AI will parse the recipe automatically - review and edit as needed
  4. Save: Add the recipe to your collection
  5. Manage: View, search, filter, edit, or delete saved recipes

Database Schema

The app uses a normalized SQLite database with two main tables:

Recipes Table (recipes_v1)

  • id - Primary key
  • title - Recipe name (required)
  • description - Optional description
  • servings, prep_time, cook_time - Numeric metadata
  • difficulty - Enum: 'easy', 'medium', 'hard'
  • tags - JSON array of tag strings
  • source - Source URL or description
  • image_url - Optional recipe image URL
  • steps - JSON array of cooking steps
  • created_at, updated_at - Timestamps

Ingredients Table (ingredients_v1)

  • id - Primary key
  • recipe_id - Foreign key to recipes table
  • name - Ingredient name (required)
  • amount - Quantity as string (required)
  • unit - Measurement unit (required)
  • notes - Optional ingredient notes
  • order_index - For maintaining ingredient order

Key Features & Implementation Details

AI-Powered Parsing

  • Uses OpenAI GPT-4o-mini for intelligent content extraction
  • Handles fractional Unicode characters (¼, ½, ¾) and converts to decimals
  • Robust JSON extraction with fallback parsing
  • Comprehensive validation and data cleaning

File Processing

  • PDF: Uses unpdf library for text extraction
  • Images: Leverages OpenAI Vision API for OCR
  • URLs: Fetches and parses HTML content
  • Text: Direct text processing

Frontend Architecture

  • Single-page React application with TypeScript
  • Component-based architecture with clear separation of concerns
  • Mobile-first responsive design
  • Real-time error handling and loading states
  • Custom CSS animations and styling

Backend Architecture

  • Hono-based REST API with TypeScript
  • Normalized database design with proper foreign key relationships
  • Comprehensive error handling and validation
  • Database migrations with versioned table names
  • Performance optimizations with database indexes

Development Setup

Environment Requirements

  • Platform: Val Town (Deno runtime)
  • Node.js APIs: Not required (uses Deno-compatible libraries)
  • Environment Variables:
    • OpenAI API key (automatically provided by Val Town's OpenAI integration)

Project Configuration

  • TypeScript: Configured via deno.json with Val Town types
  • Linting: ESLint rules configured for Val Town environment
  • Dependencies: All imports use ESM.sh for browser/server compatibility

File Structure Notes

  • Static Files: Served via Val Town's utility functions (serveFile, readFile)
  • Database: SQLite with automatic table creation on startup
  • Error Handling: Client-side error catching enabled via Val Town's error capture script

Development Workflow

  1. Database Changes: Update table names (e.g., _v1 → _v2) when modifying schemas
  2. Testing: Use built-in test endpoints and browser developer tools
  3. Debugging: Check Val Town logs for server-side issues
  4. Deployment: Automatic on file save in Val Town environment

Troubleshooting

Common Issues

  • PDF Parsing Fails: Ensure PDF contains readable text (not scanned images)
  • Image Upload Issues: Verify image is properly base64 encoded
  • Database Errors: Check if migrations ran successfully on startup
  • OpenAI Errors: Verify API quota and model availability

Debug Endpoints

  • GET /api/health - Check if API is responding
  • GET /api/test-delete - Test database delete operations
  • Browser console logs for client-side debugging
  • Server logs in Val Town interface for backend issues
FeaturesVersion controlCode intelligenceCLI
Use cases
TeamsAI agentsSlackGTM
ExploreDocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.