A Family Cookbook

Schmitigal.com ¹ isn't just another website project. This one is a deeply personal endeavor. For as long as I can remember, our recipes lived on handwritten index cards, beautiful in their own way but fragile and scattered. I wanted to create a central, secure, and, most importantly, beautiful online home where our family could gather, share, and truly treasure these culinary stories.

This project is a full-stack SvelteKit application, with the incredible PocketBase ² running the database.

PocketBase

PocketBase ² was a game-changer. This was the first project that I fully utilized. It was beneficial for taking care of user authentication, database wrangling, and file storage. This freed me up to pour my energy into crafting the frontend user experience and those unique design touches that truly make schmitigal.com ¹ feel special.

And, of course, this project uses SvelteKit ³ for the frontend, allowing for a web application that feels both snappy and interactive, and gives easy access to server-side rendering and server-side functions.

Key Features

The heart of schmitigal.com ¹ is undoubtedly the digital recipe books. I didn’t want just a list of recipes; no, I wanted to capture the warmth of flipping through a well-loved, handwritten family cookbook. So, I made them personal. Each user can create their own recipe books and customize them to their heart’s content.

You can choose from a variety of cover images to find one that conveys the right feel for that book. You can also choose from fonts to add a bit more style, and even add little emoji accents with many coloring options. It’s this level of personalization that transforms each digital recipe book into a unique family keepsake.

Easy Recipe Creation

Of course, a cookbook needs recipes! The recipe creation interface is designed to be as welcoming as Grandma’s kitchen. It’s intuitive and comprehensive, making it easy for everyone in the family, no matter their tech skills. I had special consideration in my design to make it easy for my grandma to browse and add recipes. In each recipe, you can add ingredients, step-by-step instructions, mouth-watering images, and all those little family secrets that make a dish special.

I always had sharing in mind while making this project. I wanted to make sure that my family could share and contribute to the recipes that they loved. This way, they could feel like they were part of the family, and their recipes would be a part of their family’s history. So I added OpenGraph ⁴ images to each recipe page, making it easy for anyone to share the recipe with their friends. This was done using Vercel’s Satori ⁵ , which was very simple and easy to use for dynamically generating an image from a recipe.

The best part is that you can bookmark recipes that you enjoy and come back to them later. This way, you can easily keep track of your favorite recipes and easily access them when you need them. Just for a bit of nostalgia, they look like index cards.

A Visual Feast: Cozy and Hand-Crafted Design

schmitigal.com ¹ is designed to feel like a warm embrace, like stepping right into the heart of our family kitchen. This feeling is woven throughout the site through extensive custom artwork explicitly created for this digital cookbook.

From hand-drawn SVG illustrations that span the error pages to small accents and carefully chosen background patterns, every visual element contributes to the website’s unique, cozy aesthetic. I even dove into creating a custom Tailwind CSS plugin to integrate a library of hero CSS patterns, adding very nice backgrounds throughout the site.

Challenges and Learnings

Developing schmitigal.com ¹ was a delicious learning curve, filled with its share of challenges that ultimately made the project better.

Diving deep into database management and user authentication with PocketBase ² was a significant step for me. Building a truly data-driven application with secure user accounts meant a lot of database design and consideration. User authentication flows require careful planning and design to deliver the best user experience. This was my first significant project tackling these aspects head-on, and I soaked up best practices like a sponge.

Then, there was the careful balance of user interface design. Creating a UI that was cozy but genuinely user-friendly was difficult. Ensuring they could manage and explore a complete database of recipes required careful UI/UX planning. My focus became making every interaction as intuitive and welcoming as possible, especially given that my family members have varying levels of tech-savviness.

Check out the family cookbook at schmitigal.com and maybe even try out a recipe!

🍽️

Key Contributions

• Created a personalized family recipe website to preserve and share culinary traditions.
• Developed customizable digital recipe books with extensive personalization options.
• Implemented user accounts and authentication for secure family access and contribution.
• Designed and integrated extensive custom artwork, creating a unique and cozy visual identity.