Wanted a simple, ad-free recipe collection with high-quality recipes and top design. Existing recipe sites are cluttered with ads and bad UX.
Live: tasty.cooking | Code: GitHub
Stack
- Nextjs
- TypeScript
- Markdown with frontmatter for recipes
- Tailwind CSS
Content Strategy
Recipes as structured markdown with frontmatter instead of a CMS:
---
title: "Black Pepper Tofu"
description: "Restaurant-quality spicy tofu with fiery chiles"
prepTime: 35 min
readyTime: 45 min
servings: 4
tags: ["Vegetarian", "Spicy", "Quick"]
ingredients:
- "1¾ lbs firm tofu"
- "Avocado oil for frying"
- "cornstarch to dust the tofu"
instructions:
- "Pour enough oil into a large frying pan..."
- "Cut the tofu into large cubes, about 1 x 1 inch"
---
# Black Pepper Tofu
Restaurant-quality spicy tofu with fiery chiles and black pepper.
Why This Approach?
- Version control for recipes
- Type safety at build time
- No database needed
- Static generation = fast
Build Process
Uses Next.js static generation with validation in mdx-utils.ts:
// getStaticPaths for recipe pages
export async function getStaticPaths() {
const recipes = getAllRecipes() // validates required fields
return {
paths: recipes.map(recipe => ({ params: { slug: recipe.slug } })),
fallback: false
}
}
Includes incremental static regeneration and serverless fallbacks for efficient updates.
Give the repo a star if you find it useful. Contributions and comments welcome, thanks!
Top comments (0)