Coffee Recipes

Przepisy na kawę z kilku ebooków w jednym miejscu – wyszukiwanie po składnikach, link z filtrami i dwa języki. Vue 3 i TypeScript.

  • Vue 3
  • TypeScript
  • Vite
  • CSS
Coffee Recipes – lista przepisów przefiltrowana po składniku
  • 22przepisy z kilku ebooków w jednym miejscu
  • 33składniki do wyszukiwania – z listy, bez wpisywania
  • 2tryby filtra – wszystkie wybrane składniki albo co najmniej jeden
  • 2języki – polski i angielski, zapamiętane w przeglądarce

Co zbudowałem

Po zakupie ekspresu do kawy dostałem mailem ebook z przepisami, drugi był za zapis do newslettera, a w ciągu miesiąca znalazłem jeszcze 2–3 kolejne. Zamiast szukać przepisu w kilku plikach PDF, zrobiłem jedno miejsce z całym zbiorem pod ręką – stronę na GitHub Pages, którą mam w zakładkach. Przy okazji uczyłem się Vue 3 i ćwiczyłem TypeScript – bez tutoriala w stylu „jak zrobić aplikację z przepisami”.

Najważniejsze cechy

  • Wyszukiwanie po składnikach z listy – przepisy z wybranymi składnikami na górze, pozostałe niżej
  • Dwa tryby filtra: przepis ze wszystkimi wybranymi składnikami albo z co najmniej jednym
  • Filtry zapisane w adresie strony – przefiltrowaną listę można komuś wysłać
  • Przepis w oknie: zdjęcie, składniki i sposób przygotowania
  • Polski i angielski, jasny i ciemny motyw oraz rozmiar czcionki – zapamiętane w przeglądarce
  • Przepisy, składniki i tłumaczenia w plikach JSON, publikacja na GitHub Pages przez GitHub Actions

Jak to wygląda

Zrzuty z działającego projektu – kliknij zrzut, żeby go powiększyć.

  • Lista – przepisy z wybranym składnikiem na górze, pozostałe niżej
  • Przepis w oknie – składniki i sposób przygotowania

1 / 2

Lista przepisów

Lista – przepisy z wybranym składnikiem na górze, pozostałe niżej

← Wszystkie projekty