Cocktail Finder Template
- Next.js
- TypeScript
Find cocktails by what’s in your cabinet or by name, with the full recipe, glass, garnish and method.
A Next.js home-bar app. Search by an ingredient such as gin or Campari, by a cocktail’s name, or ask for a surprise, and get every match with a drawing of its glass. Pick one for the full recipe: ingredients in centilitres and ounces, garnish and method. Use it as a bar menu, or lift the route to add drink recipes to a food, events or party-planning site.
What it does
- By ingredient or name
- Search what you have, like gin or Campari, or look up a cocktail you already know. One tap tries a common spirit.
- Surprise me
- A random pick for when you can’t decide. Random results skip the cache so each tap is new.
- Both measures
- Each ingredient shows centilitres and the ounce equivalent, with garnish, glass and method.
- Phone and desktop
- On a phone the recipe comes first with the matches under it; on a desk they sit side by side.
- Keeps your key private
- The browser only calls your own API route, which checks the search, caches recipes for a day and limits each visitor to 10 searches a minute.
How it works
The API route: it checks the search, answers from the cache when it can, and calls Cocktail Recipe.
/** GET /api/cocktails?name=... | ?ingredient=... | ?random=1: matching recipes from Cocktail Recipe. */
export async function GET(request: Request) {
const params = new URL(request.url).searchParams;
const random = params.get('random') === '1';
const by = params.has('ingredient') ? 'ingredient' : 'name';
const term = str(params.get(by), 40).toLowerCase();
if (!random && !term) return fail('Type a cocktail or an ingredient');
if (!random && !/^[\p{L}0-9' .&-]+$/u.test(term)) return fail('Use letters only, like “gin” or “negroni”');
const key = `cocktails:${by}:${term}`;
if (!random) {
const hit = fromCache(key, TTL_MS);
if (hit) return Response.json(hit);
}
const blocked = guard(request);
if (blocked) return blocked;
return respond(async () => {
const data = await callApi('cocktail', { query: random ? { random: 'true' } : { [by]: term } });
if (!random) toCache(key, data);
return data;
});
}Deploy it
- Get a free API key
The free plan includes 200 credits a month, no card needed. Create your key.
- Deploy it
Click Deploy to Vercel. Vercel copies the repo to your GitHub account and asks for
APIVERVE_API_KEY: paste your key there. - Open your app
Vercel builds it and gives you a live URL, usually in about a minute. Every push to the repo redeploys it.
Try the Cocktail Recipe API — the call this template makes
GETapi.apiverve.com/v1/cocktail?name=martini
Query parametersVerificationFormat
No key required to try it. Get a key to use it in your app.
{
"status": "ok",
"error": null,
"data": {
"count": 5,
"filteredOn": "name",
"cocktails": [
{
"name": "Espresso Martini",
"glass": "martini",
"category": "After Dinner Cocktail",
"ingredients": [
{
"unit": "cl",
"amount": 5,
"ingredient": "Vodka"
},
{
"unit": "cl",
"amount": 1,
"ingredient": "Coffee liqueur",
"label": "Kahlúa"
},
{
"special": "Sugar syrup (according to individual preference of sweetness)"
},
{
"special": "1 short strong Espresso"
}
],
"ingredientCount": 4,
"estimatedStrength": "medium",
"preparation": "Shake and strain into a chilled cocktail glass."
},
{
"name": "Lemon Drop Martini",
"glass": "martini",
"category": "All Day Cocktail",
"ingredients": [
{
"unit": "cl",
"amount": 2.5,
"ingredient": "Vodka",
"label": "Citron Vodka"
},
{
"unit": "cl",
"amount": 2,
"ingredient": "Triple Sec"
},
{
"unit": "cl",
"amount": 1.5,
"ingredient": "Lemon juice"
}
],
"garnish": "Lemon slice",
"preparation": "Shake and strain into a chilled cocktail glass rimmed with sugar."
},
{
"name": "French Martini",
"glass": "martini",
"category": "Before Dinner Cocktail",
"ingredients": [
{
"unit": "cl",
"amount": 4.5,
"ingredient": "Vodka"
},
{
"unit": "cl",
"amount": 1.5,
"ingredient": "Raspberry liqueur"
},
{
"unit": "cl",
"amount": 1.5,
"ingredient": "Pineapple juice"
}
],
"preparation": "Stir in mixing glass with ice cubes. Strain into chilled cocktail glass. Squeeze oil from lemon peel onto the drink."
},
{
"name": "Dirty Martini",
"glass": "martini",
"category": "Before Dinner Cocktail",
"ingredients": [
{
"unit": "cl",
"amount": 6,
"ingredient": "Vodka"
},
{
"unit": "cl",
"amount": 1,
"ingredient": "Vermouth",
"label": "Dry vermouth"
},
{
"unit": "cl",
"amount": 1,
"ingredient": "Olive juice"
}
],
"garnish": "Green olive",
"preparation": "Stir in mixing glass with ice cubes. Strain into chilled martini glass."
},
{
"name": "Dry Martini",
"glass": "martini",
"category": "Before Dinner Cocktail",
"ingredients": [
{
"unit": "cl",
"amount": 6,
"ingredient": "Gin"
},
{
"unit": "cl",
"amount": 1,
"ingredient": "Vermouth",
"label": "Dry vermouth"
}
],
"preparation": "Stir in mixing glass with ice cubes. Strain into chilled martini glass. Squeeze oil from lemon peel onto the drink, or garnish with olive."
}
]
}
}