Hearth & Whisk — Cooking Channel Website

A polished, mobile-first demo website for a cooking YouTube channel. Built with Next.js, TypeScript, and Tailwind CSS, ready to deploy on Vercel.

Demo brand: Hearth & Whisk — warm editorial recipes, searchable archive, recipe detail pages with YouTube embeds, and creator-focused About page.

Features

• Responsive home, recipes archive, recipe detail, and about pages
• Search + category + difficulty filters
• Ingredient checklists, tips, nutrition, and related recipes
• YouTube-style video embeds (demo IDs — swap for yours)
• SEO metadata, Open Graph defaults, sitemap, robots, and Recipe JSON-LD
• Local typed recipe data — no API keys required

Local development

npm install
npm run dev

Open http://localhost:3000.

Other scripts:

npm run lint
npm run build
npm start

Customize content

Edit one file to rebrand and replace demos:

• data/recipes.ts — brand name, tagline, creator, email, YouTube handle, categories, and all recipes
• lib/types.ts — TypeScript shapes for recipes

For each recipe you can update:

• title, description, images, category, tags
• prep/cook times, servings, difficulty
• ingredients, instructions, tips, nutrition
• youtubeId for the cook-along embed

Images currently use Unsplash URLs. Remote host images.unsplash.com is already allowed in next.config.ts. To use local images, put files in public/ and point image to paths like /recipes/my-dish.jpg.

Deploy to GitHub + Vercel

This project already has a local git repository from scaffolding. You do not need to paste passwords or tokens into chat.

1. Create a GitHub repository

1. Go to https://github.com/new
2. Create an empty public or private repo (no README / .gitignore / license)
3. Copy the repository URL, for example:
   • https://github.com/YOUR_USERNAME/cooking-website.git

2. Push this project

From the project folder:

git add .
git commit -m "Add Hearth & Whisk cooking channel website"
git branch -M main
git remote add origin https://github.com/YOUR_USERNAME/cooking-website.git
git push -u origin main

If GitHub asks you to sign in, use the browser / GitHub CLI auth flow — never paste a personal access token into this chat.

Optional (if you have GitHub CLI installed and authenticated):

gh repo create cooking-website --private --source=. --remote=origin --push

3. Deploy on Vercel

1. Go to https://vercel.com/new
2. Sign in with GitHub
3. Import the cooking-website repository
4. Keep the defaults:
   • Framework: Next.js (auto-detected)
   • Build command: next build
   • Output: default
5. Click Deploy

No environment variables are required for this static-demo version.

4. After deploy

• Share the *.vercel.app URL
• Optional: add a custom domain in Vercel → Project → Settings → Domains
• If your Vercel URL changes, update metadataBase in app/layout.tsx and the URLs in app/sitemap.ts / app/robots.ts

Current production URL: https://cooking-site-iota.vercel.app/

Project structure

app/                  # Routes (home, recipes, about) + SEO files
components/           # UI building blocks
data/recipes.ts       # Demo brand + recipe content
lib/types.ts          # Shared types
public/               # Static assets

Notes for client handoff

• All recipe text and branding are original demo content (not copied from commercial recipe sites).
• YouTube embeds use a placeholder video ID — replace with real public video IDs.
• Newsletter form is front-end only (success state demo). Connect an ESP later if needed.