Repository files navigation

A personal recipe website built with React, Vite, TypeScript, and Tailwind CSS, powered byTina CMS for content management.

• Node.js 20+
• npm or pnpm

# Install dependenciesnpm install# Start development server (recommended - fast and simple)npm run dev:prod# Or start with Tina CMS admin (requires Tina Cloud setup)npm run dev

Visithttp://localhost:5000

💡 Tip: Usenpm run dev:prod for regular development. Only usenpm run dev if you need the CMS admin interface at/admin.

If you see a 403 error when runningnpm run dev, it's because Tina CMS is trying to authenticate without valid credentials.

Quick Fix: Usenpm run dev:prod instead - it runs the app without Tina CMS (faster and no authentication needed).

See403 Error Fix Guide for details.

This project uses Tina CMS for managing recipes. You can edit content visually through the admin interface.

For optimal performance and page load times, please follow these image size recommendations:

• Format:WebP recommended for best compression (25-35% smaller than JPEG)
  • WebP: Best choice for all recipe photos (smaller files, great quality)
  • JPEG: Alternative if WebP conversion isn't available
  • PNG: Only for graphics with transparency (logos, icons)
• Compression: Use tools likeSquoosh orTinyPNG
  • Squoosh (recommended): Convert to WebP with quality 75-85%
  • TinyPNG: Also supports WebP conversion
  • ImageOptim (Mac): Batch processing for multiple images
• Aspect Ratios:
  • Hero/Thumbnail: 16:9 (landscape)
  • Gallery: 1:1 (square) or 4:3 (flexible)
• File Names: Use descriptive, lowercase names with hyphens (e.g.,beef-curry-hero.webp)

• Hero image (1200×675px): ~80-120 KB (vs 200+ KB JPEG)
• Thumbnail (600×338px): ~40-60 KB (vs 100+ KB JPEG)
• Gallery (800×800px): ~60-100 KB (vs 150+ KB JPEG)

Gallery images open in a lightbox with these features:

• Max display size: 80% viewport height, 90% viewport width (max 1200px wide)
• Semi-transparent background (80% opacity) - click outside to close
• Keyboard navigation: Arrow keys to navigate, Escape to close
• Responsive: Adapts to screen size automatically

For complete setup instructions, seeTina Cloud Setup Guide.

Quick overview:

1. Create account athttps://app.tina.io/
2. Create a project and get your credentials
3. Add GitHub secrets:NEXT_PUBLIC_TINA_CLIENT_ID andTINA_TOKEN
4. Deploy - admin will be available at/admin

# 1. Copy environment templatecp .env.example .env# 2. Add your Tina Cloud credentials to .env# 3. Start dev server with CMSnpm run dev# 4. Access admin at http://localhost:5173/admin

• npm run dev:prod -Recommended: Start Vite dev server (fast, no CMS)
• npm run dev - Start Vite + Tina CMS (requires Tina Cloud credentials)
• npm run build - Build for production (requires Tina Cloud credentials)
• npm run build:local - Build without Tina Cloud (faster)
• npm run lint - Run ESLint
• npm run preview - Preview production build

├── content/recipes/      # Recipe markdown files (managed by Tina)├── src/                  # React application source│   ├── components/       # Reusable UI components│   ├── pages/           # Page components│   ├── hooks/           # Custom React hooks│   └── utils/           # Utility functions├── tina/                # Tina CMS configuration│   └── config.ts        # Content schema├── public/              # Static assets└── docs/                # Project documentation

Tests have been removed from this project in favor of manual testing. See the development workflow in the documentation for testing guidelines.

• Tina Cloud Setup - Complete CMS setup guide
• 403 Error Fix - Fix 403 Forbidden errors
• Task History - Development task logs

This project is configured for GitHub Pages deployment:

1. Push tomain branch
2. GitHub Actions automatically builds and deploys
3. Site available at your GitHub Pages URL
4. Admin panel available at/admin

• Frontend: React 19, TypeScript, Tailwind CSS 4
• Build Tool: Vite 6
• CMS: Tina CMS (cloud-hosted)
• UI Components: Radix UI, shadcn/ui patterns
• State Management: TanStack Query
• Routing: React Router
• Markdown: React Markdown, Marked

MIT License - See LICENSE file for details

Built with ❤️ using GitHub Spark and Tina CMS