Case study 08 / 18 · Websites & apps
Stratus Spoon (v2)
A full-stack recipe platform for discovering, creating, and organizing recipes. It combines external recipe search, personal collections, AI-generated recipe imagery, and recommendations based on user preferences and interactions.
Case study
Version two turns the original static recipe site into an account-based application: recipe browsing and detail pages, owner editing, imports from an external recipe API, collections, ratings, generated imagery and preference-based recommendations.
The problem
The first version was a static frontend. Version two adds what a real cookbook needs: saved user data, recipe ownership, cloud-stored images and personalised discovery.
What was built
- Sign-in, protected recipe actions and one browser for both internal and external recipes.
- Recipe creation and editing, uploads, AI-generated images, imports, favourites and named collections.
- Ratings, behaviour signals and recommendation scoring.
Key decisions
- Services, hooks, views and reusable components live in separate layers.
- TanStack Query handles server state and Zustand handles client state.
- Global rating statistics are stored separately and updated atomically.
- Recommendation queries fall back gracefully, so one failure cannot break the homepage.
Where it stands
The documented feature set is built. Recipe search relies on the Spoonacular API, and generated images come from the separate image generation service.
How it was built
Frontend
- Next.js
- React
- Tailwind CSS
- Framer Motion
- TanStack Query — Server state
- Zustand — Client state
Backend
- Firebase Functions
Data
- Cloud Firestore — Recipes, collections and ratings
- Firebase Storage — Recipe images
AI
- Image generation service — AI-generated recipe images with Stable Diffusion XL
Integrations
- Firebase Authentication — Sign-in
- Spoonacular API — External recipe search and imports