Byron Dray
ProjectsAbout

Cookbook+

Next.jsTailwind CSSAmazon S3Drizzle ORMPostgreSQL (Neon)Clerk

Project Overview

Cookbook+ transforms the cooking experience by combining a beautiful recipe repository with community-driven discovery. Users can browse dishes through a visually rich interface, upload their own creations with step-by-step instructions and photos, save favourites, leave reviews, and install the app as a PWA for quick access.

Key Features

Intuitive recipe creation with structured ingredients, instructions, and photo uploads
Photo galleries for each recipe with step-by-step cooking visuals
Recipe favouriting and a personalized favourites collection
Community reviews and ratings on recipes
Installable PWA with share-target support for sharing recipes directly from other apps

Challenges Solved

Implementing efficient image processing and storage for multiple photos per recipe
Optimizing database queries for complex recipe filtering and search operations
Building PWA share-target and install flows for a native-like mobile experience

Technologies Used

Next.js

Employed for its hybrid rendering capabilities, delivering fast initial page loads for recipe browsing while enabling dynamic features like recipe editing and favourites.

Tailwind CSS

Used to create a visually appealing, responsive design system that adapts to various devices, including kitchen tablets and mobile phones used while browsing and cooking.

Amazon S3

Implemented with a custom image processing pipeline for storing and serving optimized recipe images, including thumbnail generation and progressive loading for gallery views.

Drizzle ORM

Leveraged for type-safe database access with a schema designed to efficiently represent relationships between recipes, categories, favourites, reviews, and media.

Clerk

Integrated for secure user authentication and session management, enabling personalized features like saved favourites and user profiles.

Development Process

1

User Research & Cooking Workflow Analysis

Conducted interviews with home cooks to understand their pain points in recipe management and discovery to identify key opportunity areas.

2

Information Architecture Development

Created a comprehensive data model for recipes that captures the complexity of ingredients, preparation methods, categories, and reviews while remaining flexible for different culinary traditions.

3

User Experience Design

Designed user flows and interfaces optimized for both recipe discovery and practical cooking use, with special attention to kitchen-friendly viewing modes and intuitive creation tools.

4

Image Management Pipeline

Implemented an S3-based image processing system that optimizes recipe photos for different viewing contexts while maintaining visual quality and fast loading times.

Project Links

Live Demo
View Source Code