Full-stack · Recipe platform

Food Recipes

A personal kitchen workspace for discovering recipes, planning meals, and managing shopping and pantry workflows.

Visit live site Source code

FocusRecipes, planning & kitchen workflows

Project typePersonal project · Sep 2023 - Present

Technology

React

NestJS

PostgreSQL

TypeScript

Prisma

Redux Toolkit

TanStack Query

Tailwind CSS

Docker

Playwright

My roleFull-stack developer · Personal project

ScopeReact application state and recipe workflows; versioned NestJS API, authentication, and persistence.

The challengeSaving a recipe is only one part of preparing a meal. Planning, ingredients, pantry availability, and cooking progress need continuity, while private notes and shared household data need appropriate access controls.

OutcomeDelivered connected recipe, meal-planning, shopping, pantry, and household workflows through a separately deployed frontend and API.

Inside the product

Choose a screen, then open it for a closer look.

My contribution

What I worked on

Full-stack development · Personal project

01
Kitchen workflows
Built three connected workflows for meal planning, shopping lists, and pantry management using React and TanStack Query.
02
API & authentication
Designed a 41-model PostgreSQL schema and NestJS REST APIs with JWT authentication, refresh-token rotation, and role-based authorization.
03
Frontend & deployment
Developed the React and TypeScript application with Redux Toolkit, TanStack Query, and a separately deployed API.

Overview

Food Recipes is a full-stack cooking workspace. Its React and TypeScript frontend uses Redux Toolkit and TanStack Query, while a versioned NestJS REST API persists application data in PostgreSQL through Prisma.

The challenge

Saving a recipe is only one part of preparing a meal. Planning, ingredients, pantry availability, and cooking progress need continuity, while private notes and shared household data need appropriate access controls.

Engineering approach

Rotate refresh credentials in HttpOnly cookies

Why this choice

The API rotates HttpOnly refresh cookies, hashes sessions, and revokes a token family when it detects reuse.

Trade-off

Rotation improves containment, but simultaneous refresh requests need careful client coordination to avoid presenting an already-rotated token.

Keep refresh-session lifecycle on the API

Why this choice

Authentication and session state stay behind the versioned NestJS API while the frontend consumes its authenticated REST workflows.

Trade-off

A clearer security boundary adds API responsibilities for rotation, reuse revocation, logout, and session persistence.

Separate remote and local state responsibilities

Why this choice

TanStack Query manages remote API data while Redux Toolkit organizes frontend application workflows.

Trade-off

Two state tools require explicit ownership rules, but avoid treating cached server records and transient UI state as the same thing.

Product capabilities

Searchable recipe discovery & publishing

Saved collections, reviews & private notes

Meal plans, shopping lists & pantry

Household sharing, cooking progress & history

System overview

Source-backed architectureFood Recipes

Implemented structureSource repository ↗

The React app uses the versioned NestJS REST API for recipes, planning, pantry and household workflows.

React + TypeScript

REST / JSON

NestJS REST API · /api/v1

Prisma queries

PostgreSQL + Prisma

Direct image upload

Signed upload grant → object storage

Deployment is split between a Vercel frontend and a containerized NestJS API.

Evidence & validation

The repository README separates mocked browser journeys from real API and database acceptance checks.

A public production check on October 10, 2026 searched for “oats” and returned 3 matching recipes. That confirms this query only; results depend on the live catalog.

Source code

Design considerations

The repository keeps the Vercel frontend and containerized NestJS API as independent packages. Its documented checks separate mocked browser journeys from real API/database acceptance tests.