plContact

Coffee Recipes

Coffee recipes from several ebooks in one place – search by ingredients, a link with filters and two languages. Vue 3 and TypeScript.

  • Vue 3
  • TypeScript
  • Vite
  • CSS
See it live Code on GitHub
Coffee Recipes – recipe list filtered by an ingredient
  • 22recipes from several ebooks in one place
  • 33ingredients to search – picked from a list, no typing
  • 2filter modes – all selected ingredients or at least one
  • 2languages – Polish and English, saved in the browser

What I built

After I bought a coffee machine, I got an ebook with recipes by email, a second one for signing up to the newsletter, and within a month I found 2–3 more. Instead of searching for a recipe in several PDF files, I made one place with the whole collection at hand – a page on GitHub Pages that I keep in my bookmarks. At the same time I was learning Vue 3 and practising TypeScript – without a "how to build a recipe app" tutorial.

Main features

  • Search by ingredients from a list – recipes with the selected ingredients on top, the rest below
  • Two filter modes: a recipe with all selected ingredients or with at least one
  • Filters saved in the page address – you can send a filtered list to someone
  • A recipe in a dialog: photo, ingredients and how to make it
  • Polish and English, light and dark theme and font size – saved in the browser
  • Recipes, ingredients and translations in JSON files, published on GitHub Pages with GitHub Actions

How it looks

Screenshots of the live project – click one to see it bigger.

  • List – recipes with the selected ingredient on top, the rest below
  • A recipe in a dialog – ingredients and how to make it

1 / 2

Recipe list

List – recipes with the selected ingredient on top, the rest below

Case study and posts

How it was made, what went wrong and what I learned.

← All projects