# Customer Experience: Recipe preview | Vronika

The recipe detail page loads a preview by recipe ID and presents the available purchase information without exposing the full paid recipe.

---

**Path:** /platform/frontend/recipe-detail
**Canonical:** https://vronika.co/platform/frontend/recipe-detail
**Category:** Platform: Customer Experience
**Live Route:** /recipes
**Source File:** trifecta/client/src/pages/RecipeDetail.tsx

## How It Works

1. The route ID is requested from /api/recipes/:id/preview.
2. The returned preview content, imagery, and purchase details are rendered with loading and not-found handling.
3. A purchase action adds or sends the recipe into the checkout path.

## Features

- ID-based recipe preview
- Protected preview content
- Purchase information
- Loading and not-found states

## Integrations

- Recipe preview API
- Recipe cart
- Hosted recipe checkout

---

## Sources
Content derived from the live trifectabar.com codebase and deployed platform. This explainer documents implemented code and does not expose protected source routes or business data.