Recipes (search) with Mock API Studio
The editor below is preset with a recipes resource: dish name, cuisine, category, difficulty, prep and cook minutes, servings, an ingredients array, calories, rating and an image. Press Create my API and you get 25 searchable recipes (the free maximum; Pro holds 5,000), so a search box, autocomplete and filter chips can be built against real ?q= and field queries.
- Check the five sample recipes. Generated recipes get dish names, cuisines, descriptions and 3 to 8 ingredients, so searches for common words like chicken, rice or chocolate return several hits.
- Keep 25 recipes (the free maximum) and press Create my API.
- Wire the search box: GET /recipes?q=garlic matches any text in a record, ingredients included, case-insensitively. Debounce keystrokes and read X-Total-Count for the result count.
- Narrow one field instead of all: ?name_like=cake matches dish names only, ?cuisine=Italian is an exact filter, and ?category=Dinner&difficulty=Easy combines two chips.
- Rank and page results: ?q=chicken&sort=rating&order=desc&_page=1&_limit=10, or ?cookTimeMinutes_lte=20 for a quick-meals view.
What to know
A search box needs data that contains the words people type. Lorem placeholder text makes every query return nothing or everything. This preset generates dish names, cuisine names, food descriptions and ingredient lists, so a query for a common ingredient finds a realistic handful of recipes and an unlikely one finds none, which is the empty state you also need to design.
There are two kinds of matching. ?q= walks every field of each record, nested arrays included, and keeps the record if any value contains the text, ignoring case. field_like does the same contains-match on one field only. Exact filters (?cuisine=Thai) are case-sensitive and compare the whole value, and repeating a key means either value: ?category=Lunch&category=Dinner. Search runs before paging, so X-Total-Count is the number of hits.
This is substring search, not a search engine: there is no stemming, typo tolerance or relevance score, so "chickens" does not match "chicken" and results come back in id order unless you pass sort. That is usually what you want while building the UI, because results are predictable and testable; add ranking on your real backend later. Your five sample recipes stay at the top with their exact text, so a test can search for "risotto" and expect recipe 3.
For autocomplete, request a small page (?name_like=ch&_limit=5) on each debounced keystroke and cancel the previous request with an AbortController, so a slow early response cannot overwrite a newer one. The free plan allows 300 requests a day per project, so debounce the search box (250 ms is plenty) to make a session of typing fit, and Pro gives 20,000; each response carries X-Mock-Requests-Today so you can see how many are left.
Updated · Cosmovex
Questions
Which fields does ?q= search?
All of them: names, cuisines, descriptions, every ingredient in the array and even numbers as text, at any depth. Matching is a case-insensitive substring match. Use field_like (for example ?name_like=soup) to search a single field.
Is the search fuzzy?
No. It is a plain substring match with no stemming, synonyms or typo tolerance, and results keep their stored order unless you add sort and order. That keeps responses predictable for UI work and tests.
Are the recipes real?
The five samples are hand-written; the rest are generated combinations of dish names, cuisines, descriptions and ingredients. They read like a menu but are not tested recipes, so do not cook from them.
How do I build filter chips with counts?
Call the list with the chip's filter and &_limit=1, then read X-Total-Count: /recipes?category=Dessert&_limit=1 returns one item and the total number of desserts. Category and difficulty only accept the values in your samples.
Can I add my own recipes?
Yes. POST /recipes with a JSON body returns 201 with the new id, and the recipe is searchable straight away. You can also edit any cell in the data grid on this page, and Reset to seed returns to the original 25.
The free plan covers everything on this page. Mock API Studio Pro ($5/mo, billed monthly) is described on the Mock API Studio page.
