Serverless Recipe Book

A lightweight, serverless recipe discovery app that lets users search TheMealDB, refine results by diet and cook time, and save favorites without signing up. It turns a public recipe API into a polished, browser-based cookbook experience that feels personal and fast.

Core Objectives

Instant Recipe Discovery

The app is built to help users find meals quickly from a public recipe source without needing a backend or account. Search and filtering stay lightweight so the experience feels immediate in the browser.

Personal Curation Without Friction

It gives users a simple way to bookmark recipes they like, then carry those favorites across sessions through local storage. The import/export tools make the collection portable instead of locked into one device.

Serverless Portfolio Demo

The project showcases a clean client-side architecture that is easy to deploy and maintain. It demonstrates practical use of React state, API integration, persistence, and accessible modal interactions in a compact real-world app.

Welcome & Onboarding

First-Visit Modal

A welcome screen introduces the app and explains the main workflows before the user starts browsing.

No-Signup Experience

Users can begin searching and saving recipes immediately without creating an account.

Persisted Intro State

A localStorage flag remembers that the welcome screen has already been seen.

Recipe Discovery & Filtering

Debounced Search

The search field waits briefly before firing a request so the app avoids hitting the API on every keystroke.

URL-Synced State

Search terms and filters are written into the URL, making the current recipe view shareable and refresh-safe.

Client-Side Filtering

Diet, intolerance, and cook-time filters are applied after fetching because the external API does not support the full filter logic.

Recipe Cards

Results render as clickable cards with an image, title, cook time, and favorite toggle for fast browsing.

Recipe Detail & Favorites

Modal Recipe Viewer

Clicking a recipe opens a focus-trapped dialog with the full ingredient list and instructions.

Favorite Toggling

Users can bookmark recipes directly from both the card view and the detail modal.

Favorites Library

A dedicated favorites screen shows saved recipes in a separate grid for quick revisiting.

JSON Import/Export

Favorites can be downloaded as JSON or restored from a file, making the collection portable.

Cross-Tab Sync

Favorite updates are synchronized across browser tabs through the storage event.

Architecture & Processing Flow

Sequential Processing Flow

Update Query Sync URL State Fetch TheMealDB Client Filtering Render UI Cards Local Persistence

1. The user enters a search term or changes the diet, intolerance, or time filters.
2. The app debounces the search input, then updates the query string in the URL for persistence.
3. searchMeals() calls TheMealDB search endpoint and normalizes each meal into a consistent recipe shape.
4. The app applies client-side filtering for diet, intolerance, and cook-time constraints.
5. Matching recipes render as interactive cards, and selecting one opens a detailed modal view.
6. Favorites are stored in localStorage, mirrored across tabs, and can be exported or imported as JSON.

The architecture is intentionally serverless and client-first. Instead of introducing a custom backend, the app uses TheMealDB as its only remote data source and keeps user-specific state in localStorage. A small FavoritesProvider context centralizes persistence, lookup, toggle behavior, and JSON import/export so the rest of the UI can stay simple.

Two implementation details stand out as especially thoughtful. First, the app derives a stable readyInMinutes value from the meal ID so cook-time filtering works even though the upstream API does not provide that field consistently. Second, the recipe detail modal includes keyboard handling, focus trapping, and exit animations, which makes the interface feel polished and accessible without adding heavy dependencies.

Project Impact

Serebook redefines digital recipe discovery by offering a completely frictionless, serverless cookbook experience. By stripping away forced user registrations, heavy backends, and fragmented external links, it allows culinary enthusiasts to search, filter, and save complex meals in an instantly responsive interface.

The application proves the immense capability of client-side persistence and modern API integration. Leveraging browser-native storage to automatically sync favorites across tabs and offering robust JSON import/export mechanisms, Serebook ensures that users retain absolute ownership and portability of their curated collections.

Ultimately, Serebook delivers a deeply user-centric utility. By elegantly overlaying granular dietary and timing filters over a massive external database, it removes the decision paralysis of daily meal planning and converts a vast array of recipes into a highly organized, personal kitchen companion.