Delectable AI

1. Short Overview

Delectable is a full-stack, AI-powered recipe discovery web application that helps users find, explore, and interact with recipes using both traditional search and natural language queries.

It enables users to browse trending, vegetarian, and cuisine-specific recipes, get AI-assisted cooking guidance directly on recipe pages, and export recipes to PDF — all within a clean, responsive interface with full dark mode support.

2. Tech Stack

Category Technology Frontend React 18, TypeScript, Vite, TanStack Query v5, React Router v6, Tailwind CSS, Zod, DOMPurify, jsPDF, react-icons, Vitest Backend Node.js, Hono.js, TypeScript, Zod External APIs Spoonacular Recipe API, Google Gemini AI API (@google/generative-ai) Database None — stateless proxy architecture Tooling npm workspaces (monorepo), concurrently, ESLint, tsx, GitHub Actions CI Deployment Static frontend (Vite) + Node.js API server; CI/CD via GitHub Actions

3. Problem Solved

Recipe discovery is fragmented and inefficient.

Users typically have to:

Search across multiple food blogs and platforms

Filter manually through inconsistent UI systems

Deal with irrelevant results that don’t match intent

Leave recipe pages to ask basic cooking questions

Even when filters exist, they rarely support nuanced intent like: “high-protein meals under 30 minutes with no dairy”

Delectable solves this by unifying recipe search, filtering, and AI cooking assistance into one intelligent interface.

4. Results / Key Features

AI-powered smart search: Natural language queries (e.g., “high-protein meals under 30 minutes”) are converted by Gemini into structured Spoonacular filters

In-page recipe copilot: AI assistant on every recipe page for substitutions, scaling, allergies, and cooking guidance

Cuisine-first discovery: Trending, vegetarian, and cuisine-specific browsing powered by real-time Spoonacular data

PDF export: Download any recipe as a formatted PDF for offline use

Secure API proxy: All external API keys are server-side only (no client exposure)

Rate limiting: In-memory token bucket system (30 req/60s & 20 req/60s per IP) for AI endpoints

Production-grade type safety: Full TypeScript + Zod validation at all API boundaries

Dark mode + responsive UI: Fully custom Tailwind-based design system with mobile-first layout

5. Problem (Expanded Context)

Traditional recipe platforms are rigid and keyword-dependent.

They:

Require exact search terms

Fail to understand user intent

Lack contextual cooking assistance

Force users to leave the page for clarifications (substitutions, allergies, scaling, etc.)

There is no unified layer between intent → recipe data → cooking guidance.

6. Solution

Delectable introduces an AI layer at two key touchpoints:

1. AI Search Layer

Natural language queries are processed server-side by Google Gemini, which extracts structured filters such as:

diet

cuisine

intolerances

max cooking time

These are then passed to Spoonacular’s API as precise parameters.

2. AI Recipe Copilot

Each recipe page includes a Gemini-powered assistant that receives full recipe context (title, ingredients, instructions) and enables grounded, context-aware conversations about:

substitutions

dietary adjustments

scaling recipes

simplified explanations

The backend is a lightweight Hono.js proxy API that:

Validates all requests with Zod

Enforces CORS policies

Applies IP-based rate limiting

Separates data fetching (Spoonacular) from intelligence (Gemini)

7. Features

Landing page with featured content and category entry points

Trending recipes feed (Spoonacular random endpoint)

Vegetarian recipe category page

Cuisine-based browsing via dynamic routes

Keyword-based search (Spoonacular API)

AI natural language search (Gemini-powered intent parsing)

Advanced filters: cuisine, diet, intolerances, max ready time

Full recipe detail pages (ingredients, instructions, metadata)

HTML sanitization using DOMPurify for all external recipe content

PDF export via jsPDF

AI Recipe Copilot chat interface (substitutions, scaling, allergy queries)

Dark mode toggle with CSS variable theming

Loading skeletons and empty states across all async views

Error boundaries with retry support

Legacy route redirection for /searched/:term

404 Not Found page

API health check endpoint (GET /health)

Corporate HTTPS proxy support (HTTPS_PROXY, NO_PROXY)

CI pipeline (lint → typecheck → test → build on every PR/push)

8. Stack (Full Architecture)

Frontend

React 18.3.1

TypeScript (strict mode)

Vite (build tool + dev server)

React Router v6 (lazy-loaded routing)

TanStack React Query v5 (server state management)

Zod (runtime validation)

DOMPurify (HTML sanitization)

jsPDF (PDF generation)

react-icons (HeroIcons 2)

Backend

Node.js 20+

Hono.js (routing, middleware, logging)

TypeScript (strict, NodeNext modules)

tsx (dev runtime)

Zod (request/response validation)

undici (HTTP client with proxy support)

Custom in-memory rate limiter (token bucket per IP)

Database

None — fully stateless architecture with real-time API fetching from Spoonacular.

Authentication

None — public-facing application with no user accounts.

AI / LLMs

Google Gemini API (@google/generative-ai)

Model: gemini-3-flash-preview

Structured JSON mode for deterministic filtering

Conversational mode for recipe copilot

Styling / UI

Tailwind CSS v3

Custom CSS variables for theming

Fonts: DM Sans, Fraunces, JetBrains Mono

Fully custom component system (no UI library)

Deployment

Frontend: Static Vite build (deployable to any CDN/static host)

Backend: Node.js server (apps/api/dist/index.js)

CI/CD: GitHub Actions (lint → typecheck → test → build)

Other Tools

npm workspaces (monorepo)

concurrently (parallel dev servers)

Vitest + Testing Library + jsdom

ESLint + typescript-eslint

PostCSS + Autoprefixer

vite-plugin-svgr

9. My Role

As the developer of Delectable, responsibilities included:

Architecture design: Built a monorepo using npm workspaces separating web and api packages with clear deployment boundaries

Backend engineering: Developed a Hono.js API server with typed routes, middleware, Zod-based validation, and in-memory rate limiting

API integration: Integrated Spoonacular API with secure proxy logic and structured response handling

AI integration: Implemented Gemini-powered natural language search + recipe copilot with structured JSON outputs and prompt engineering

Frontend development: Built full React 18 application with feature-based architecture, lazy routes, and TanStack Query for server state

Type safety: Enforced strict TypeScript + Zod validation across frontend and backend

Security: Implemented server-side API proxying, DOMPurify sanitization, and rate limiting for AI endpoints

UI/UX: Designed all UI components from scratch including skeleton loaders, empty states, error handling, and PDF export UX

DevOps: Configured CI pipeline using GitHub Actions for linting, typechecking, testing, and builds

Developer experience: Set up Vite proxying, HMR, and concurrent dev workflows for seamless local development

10. Live URL

https://delectable.vercel.app/

11. GitHub

https://github.com/engraya/Delectable