A modern recipe collection website optimized for performance, accessibility, and visual appeal with no clutter, built with Next.js and TypeScript.

• Lightning Fast: Built with Next.js for server-side rendering and static generation
• Type Safety: Fully typed with TypeScript for better developer experience and fewer bugs
• Content as Code: Recipes stored as MDX files for easy editing and version control
• Fully Responsive: Beautiful on all devices from mobile to desktop
• Accessible: WCAG compliant with proper semantic HTML and keyboard navigation
• SEO Optimized: Rich metadata, JSON-LD Schema.org markup, and optimized for search engines
• Progressive Web App: Works offline and can be installed on mobile devices
• Beautiful Typography: Custom fonts with attention to readability and aesthetics
• High-Quality Images: Optimized for fast loading with Next.js Image component
• Clean Architecture: Well-organized code structure for easy maintenance

Tasty Cooking was built with these principles in mind:

• Minimalist Design: Clean white title bars create visual breathing room and help content stand out. The high contrast ensures readability while maintaining elegance.

• Typography: We use a carefully selected font combination:

  • Windsor Bold for headings: A classic serif with personality that adds warmth and character
  • GT Flexa for body text: A modern sans-serif that ensures excellent readability at all sizes

• Color Palette: Our colors are inspired by natural cooking environments:

  • Moss green (#383d23): An earthy, organic tone that evokes nature and fresh ingredients
  • Parchment (#e2d7a0): A warm, soft hue reminiscent of vintage recipe cards and natural fibers
  • Strategic use of contrast: Creates visual hierarchy while maintaining a cohesive, natural feel

• Performance First: Every design decision was weighed against performance impact, ensuring a fast experience even on slower connections.

• Node.js (v14.x or later)
• npm or yarn

1. Clone the repository

git clone https://github.com/username/tasty-cooking.git
cd tasty-cooking-nextjs

2. Install dependencies

npm install

3. Run the development server

npm run dev

4. Open your browser and visit http://localhost:3000

npm run build
npm start

• Next.js - React framework for production
• TypeScript - Typed JavaScript at scale
• Tailwind CSS - Utility-first CSS framework
• MDX - Markdown for the component era (used for recipe content)

tasty-cooking-nextjs/
├── public/            # Static assets (images, fonts)
│   ├── assets/
│   │   ├── fonts/     # Custom web fonts
│   │   └── img/       # Recipe and UI images
│   ├── manifest.json  # PWA manifest
│   └── robots.txt     # Robots file
├── src/               # Source code
│   ├── components/    # React components
│   ├── content/       # MDX content files
│   │   └── recipes/   # Recipe MDX files
│   ├── lib/           # Utility functions and services
│   ├── pages/         # Next.js pages
│   │   ├── api/       # API routes
│   │   └── [slug].tsx # Dynamic recipe pages
│   ├── styles/        # CSS styles
│   └── types/         # TypeScript type definitions
├── next.config.js     # Next.js configuration
├── package.json       # Project dependencies and scripts
└── tsconfig.json      # TypeScript configuration

This project is licensed under the MIT License - see the LICENSE file for details.

If you found this project helpful, please consider giving it a star!

Back to top