Jak zbudowałem UltiGameMate z Eleventy i Supabase ✣ S.Bistrović

Jak zbudowałem UltiGameMate z Eleventy i Supabase ✣ S.Bistrović


Kiedy po raz pierwszy wspomniałem o budowaniu UltiGameMate, miałem na myśli nauczenie się Svelte lub innego podobnego frameworka. Szybko zrozumiałem, że to nie dla mnie.

Następnie zdecydowałem się przejść na coś bardziej znanego z moich umiejętności – JAMstack.

Okładka UltiGameMate

Jedenaście

Od wielu lat Eleventy jest moim ulubionym frameworkiem. Jest lekki i łatwy w konfiguracji. Dodawanie nowych funkcji również jest dość pozorne.

Do tego projektu potrzebowałem kilku stron publicznych, z których mogliby korzystać wszyscy odwiedzający, a także kilku stron pod loginem.

Zdecydowałem się użyć Liquid jako języka szablonów, ponieważ jest to mój domyślny wybór od wieków.

Supabaza

Słyszałem o Supabase, ale nigdy z niego nie korzystałem. Ma wszystko, czego potrzebowałem do projektu: dostawcę OAuth, funkcje Edge i co najważniejsze, bazę danych.

W przypadku danych statycznych, takich jak zawartość banerów, tabela wyników i kluby, używam EleventyFetch. EleventyFetch przechowuje dane lokalnie i jest dostępny w każdej części aplikacji internetowej. Ułatwia to wyświetlenie informacji bez dodatkowego żądania.

W przypadku danych dynamicznych, takich jak typy i wzmocnienia, używam biblioteki klienta JavaScript. Oznacza to, że do wszystkich dynamicznych elementów aplikacji, takich jak uwierzytelnianie, wyniki użytkownika czy wybieranie dopasowań, używam kodu po stronie klienta, który komunikuje się z bazą danych. Zbudowałem szkielety, aby użytkownicy wiedzieli, że muszą poczekać na interfejs, zanim będą mogli go skonsumować lub wejść z nim w interakcję.

Oto galeria jak wygląda aplikacja:

Zrzut ekranu strony głównej UltiGameMate.

Zrzut ekranu strony głównej UltiGameMate.

Zrzut ekranu strony z wynikami UltiGameMate.

Zrzut ekranu przedstawiający okno dialogowe pojedynczego wyniku UltiGameMate.

Zrzut ekranu strony lig UltiGameMate.

Wypróbuj, to nic nie kosztuje!



Source link

Postagens Similares

  • Como criar uma campanha Performance Max ‘somente feed’

    Performance Max é o tipo de campanha “hora certa, lugar certo” do Google. No papel, é um mecanismo unificado que integra Pesquisa, YouTube, Display e Maps em um único intervalo automatizado. Embora o produto tenha amadurecido, oferecendo melhor transparência nos relatórios, muitos profissionais de PPC ainda o classificam como uma “caixa preta”. Para estrategistas de…

  • Reddit Aliuliza Wanawake Ni Nini Kilichowafanya Watambue Wapenzi Wao Hawapendi – Majibu Yanahusisha Sherehe Zilizoibiwa na Ukatili Kimya

    Mazungumzo ya Reddit yanayowauliza wanawake kushiriki pindi walipogundua kuwa mwenza hakuwapenda kikweli inavutia hisia kwenye r/AskReddit. Majibu hayatulii jinsi yanavyotambulika. Mtumiaji GreenElementsNW alielezea kugundua kitu cha kushangaza kwenye video ya likizo. Aliandika, “Hakuwahi kunipiga picha. Hatimaye ilizama nilipotazama video ya wiki moja ya likizo ya familia aliyoichukua na kutambua kwamba kila wakati nilipohamia kwenye fremu,…

  • Neon Diffraction’ın türü değiştiren ilk şarkısı “Iron River” yayınlandı

    İngiliz yapımcı Ru Goddard’ın davul ve bas takma adı olan Neon Difraction, Londra merkezlidir. Parça, 80’lerden kalma bir rock melodisi sesiyle açılıyor; belki de gişe rekorları kıran bir film için bestelenmiş gibi hissedeceğiniz bir şey. Yaptığı şey, 20. saniyede davul vuruşu gelmeden hemen önce parçayı oluşturmak ve bu noktada türlerin karışımını gerçekten hissedebiliyorsunuz. … rock…

  • Z 世代讀者揭露了對第一人稱視角的奇怪誤解

    在Z世代開始發表有關第一人稱視角的文章後,作家們對媒體文盲令人不安的新發展敲響了警鐘。顯然,一些年輕讀者認為用“我”而不是“他/她/他們”講述的故事意味著主角所做的一切都是他們會做的。 為什麼有些 Z 世代讀者認為「我」指的是他們 在小說中,第一人稱視角是最接近、最親密的,就好像主角直接向讀者說故事。這些是使用“我”代名詞的書。第三人稱視角使用像他、她和他們這樣的代名詞。 週末,在作家艾米·德貝利斯 (Amy DeBellis) 發布了一個關於第三人稱的笑話後,這個話題在 X 上引起了關注。 「沉迷於最糟糕的寫作風格:第三人稱現在時,」她寫道。 人們不可避免地犯了認真對待她的錯誤。 @bogwitchbooks/X 「為什麼這麼多人討厭第三人稱視角???」@bogwitchbooks 問道。 週一,@omarsbigsister 表示,這是“因為人們寧願自我插入,也不願考慮別人會怎麼想或怎麼做。” 這則推文揭示了第一人稱視角功能方面存在嚴重的知識差距。狂熱的讀者 @illjoy_ 用推文螢幕截圖進行了計算,顯示了對該主題的驚人誤解。 「這是我討厭第一人稱的最大原因,」@angryangryhippy 說。 「如果我正在讀一本書,主角在談論一些『我’,同時做了一些最令人麻木的廢話,我就會把書扔進垃圾桶。因為我永遠不會 那 決定。 」 「天哪,謝謝你,沒有什麼比第一人稱更煩人的了,而且這是一個可怕的角色,」@Bassanimation 表示同意。 「『我』沒有不穿內褲來參加兄弟會聚會,那隻稗子的動物卻做到了,她把所有的家具都弄得一團糟。」 如果沒有加入一些厭女症,就不會是X了。 “這才是真正的媒體文盲” 讀者和作家都對代名詞的這種解釋感到困惑。第一人稱視角的目的是加深讀者與主角的親密感,而不是取代讀者。他們正在考慮第二人稱視角,但與其他視角相比,第二人稱視角的使用要少得多。 有人認為,這是年輕一代缺乏媒體素養的表現。這太糟糕了,以至於有些人希望人們少讀書。 @corporatecake/X 「這是真正的媒體文盲,因為 wym 人們將第一人稱敘事視為 他們 做事情,而不是,你知道,別人告訴他們的故事,」@corporatecake 說。 「從來沒想過我會這麼說,但我認為應該更少的人讀書,」@jroberts332(希望如此)開玩笑說。 @kennixonette/X 「我知道現在識字率如此普遍,這有很多好處,但像這樣的人被迫學習閱讀,難道不感覺很殘酷嗎?」@kennixonette 問。 「我打賭你能猜到這些人屬於哪一代,」@neontaster 寫道。 網路非常混亂,但我們會在每日一封電子郵件中為您詳細解答。請在此處訂閱 Daily Dot 的電子報。 Source link

  • Ve Bir (1/3) – Huzursuzluk

    Disquiet Junto müzik topluluğunda her perşembe, grup üyelerinin önünde yeni bir kompozisyon mücadelesi düzenlenir ve daha sonra proje talimatlarına yanıt olarak bir parçayı kaydedip yüklemek için beş günleri olur. Junto üyeliği açıktır: sadece katılın ve katılın. (SoundCloud hesabı faydalıdır ancak gerekli değildir.) Her projeyi gerçekleştirme baskısı yoktur. Junto haftalık olarak düzenlenir, böylece her Perşembe’den Pazartesi’ye…

Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *