Personal · 2024
CIY — Cook It Yourself
Full-stack recipe platform with personalized discovery
Overview
A full-stack recipe platform where people discover, share and save recipes — with recommendations that adapt to taste. Built end to end: PostgreSQL schema, Express REST API and a React frontend.
The Problem
Recipe sites optimize for SEO walls of text, not for the person deciding what to cook tonight. I wanted discovery that starts from your ingredients and preferences instead of a search box.
The Solution
A community-driven platform with ingredient-aware recommendations, clean recipe authoring and a reading experience designed for the kitchen — large type, clear steps, no clutter.
Architecture
- Express REST API over PostgreSQL with a normalized recipe/ingredient schema that makes ingredient-based querying cheap.
- JWT-based auth with route-level guards on the API.
- React frontend with route-based code splitting; images lazy-loaded and sized responsively.
Key Features
- Ingredient-aware recipe recommendations
- Recipe authoring with images and structured steps
- User profiles, favorites and social sharing
- Dark and light reading modes
Challenges
Modeling recipes relationally
Free-text ingredients kill recommendations. A normalized ingredient vocabulary with a join table made 'what can I cook with X' a fast indexed query instead of a text search.
Performance
- Indexed ingredient joins keep recommendation queries fast as the recipe count grows.
- Responsive image sizing and lazy loading keep the feed light on mobile connections.
Lessons Learned
Owning the schema changes how you build UI — half of frontend complexity is usually a data-model problem in disguise.
Next case study
EasyURL