Recipe Box

Astro + Pages Functions + D1

Build a practical recipe app on Cloudflare.

Recipe Box is a public-safe demo app for learning full-stack development: responsive pages, serverless API routes, D1 migrations, and simple CRUD.

Browse Recipes Add Demo Recipe
Recipes List, view, add, edit, delete
Find Search and filter by cuisine, meal type, tags
Favorites Mark demo recipes you want to revisit
Database Cloudflare D1 with migrations

Architecture

A small full-stack app

Frontend

Astro renders static pages with light browser JavaScript for forms and filters.

Backend

Pages Functions handle /api/recipes and /api/recipes/:id.

Database

D1 stores demo recipes in one beginner-friendly recipes table.

Public-safe

No authentication, no paid APIs, and no private notes unless you add them later.

Learning Path

What this scaffold teaches

  1. Read recipes from D1 through a Pages Function.
  2. Create and edit recipe records with plain HTML forms and JSON requests.
  3. Search and filter with URL query parameters.
  4. Deploy the same app to Cloudflare Pages from GitHub.