My Online Cookbook

screenshot of My Online Cookbook
scss
alpinejs

A starter kit to make your own online cookbook

Overview

My Online Cookbook is the ultimate starter kit for anyone looking to create their own recipe website using Eleventy and Netlify CMS. Designed for ease of use, it caters both to non-developers and developers who wish to customize and personalize their site. This tool combines an intuitive setup with comprehensive capabilities, making it a fantastic option for anyone passionate about cooking and sharing recipes.

With its focus on accessibility and customization, My Online Cookbook stands out by providing an optimized experience for both writing and navigating recipes. It's a perfect platform for culinary enthusiasts who want to share their favorite dishes or for anyone looking to archive their family recipes in a beautifully presented format.

Features

  • Optimised for Recipes: Specifically designed for writing, reading, and managing recipes, making it easier to find ingredients and adjust serving sizes effortlessly.

  • Powerful Search: Features a robust live search function that matches industry standards, providing users with the ability to find recipes quickly without relying on external services.

  • Lightweight & Easily Extendable: Built to be both light on resources and easy to modify, using Sass for styling and minimal runtime dependencies, allowing for seamless customization.

  • Local Development Setup: Simple commands enable installation and local serving of the site, making it easy for developers to spin up the project and test changes on their machines.

  • User-Friendly Admin Interface: Access the CMS admin panel effortlessly to adjust site settings, color themes, and labels directly from a convenient dashboard.

  • Comprehensive Directory Structure: Offers a well-organized project structure that separates configurations, images, and recipes, making it straightforward to manage content.

  • Markdown Support: Each recipe can be written in markdown format, which is perfect for those who enjoy a clean and simple writing experience while still allowing for rich content inclusion.

This toolkit not only meets the basic needs of a recipe website but also empowers users to innovate and create a personalized online cooking experience.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

alpinejs
Alpine.js

Alpine.js is a lightweight JavaScript framework that simplifies the process of creating dynamic, reactive user interfaces on the web. It uses a declarative syntax that offers a higher level of abstraction compared to vanilla JavaScript, while being more performant and easier to use than jQuery.