Yggdrasil - The Tree of Life

Inspiracja

Nasz projekt był bezpośrednio zainspirowany tematem hackathonu: "Połącz 9 światów jednym kodem". Ten temat od razu przywodził na myśl Yggdrasil, Drzewo Świata z mitologii nordyckiej, które łączy dziewięć krain. Dostrzegliśmy możliwość stworzenia angażującego doświadczenia edukacyjnego, które wprowadzi graczy w świat mitologii nordyckiej poprzez interaktywną rozgrywkę.

Co robi ten projekt?

Yggdrasil Quest to aplikacja webowa zawierająca dziewięć unikalnych mini-gier, z których każda rozgrywa się w jednym z dziewięciu światów mitologii nordyckiej:

Niflheim (Kraina Mgły i Lodu) - Gra polegająca na odszyfrowaniu run nordyckich zanim skończy się czas
Helheim (Kraina Zmarłych) - Wyzwanie w postaci labiryntu 2D z ograniczonym widokiem
Jotunheim (Kraina Lodowych Olbrzymów) - Układanka z przesuwanymi elementami, gdzie gracze zbierają części Mjolnira poruszając się po lodowym terenie
Nidavellir (Kraina Krasnoludów) - Gra, w której gracze łapią spadające młoty Mjolnir, unikając jednocześnie śmiertelnych czaszek
Vanaheim (Kraina Wanów) - Gra typu match-3 z nordyckimi runami, która odkrywa starożytną mądrość
Midgard (Kraina Ludzi) - Gra memory z nordyckimi symbolami
Muspelheim (Kraina Ognistych Olbrzymów) - Gra zręcznościowa, gdzie gracze unikają spadających kul ognia
Alfheim (Kraina Jasnych Elfów) - Quiz sprawdzający wiedzę o mitologii nordyckiej
Asgard (Kraina Asów) - Wyzwanie w stylu obrony wieży jako ostateczny test

Gracze postępują przez światy, odblokowując nowe krainy w miarę rozwiązywania wyzwań. Aplikacja śledzi ich postępy i wyniki we wszystkich grach.

Jak go zbudowaliśmy?

Yggdrasil Quest stworzyliśmy używając nowoczesnego stacku technologicznego:

Frontend: React z TypeScript dla bezpieczeństwa typów i struktury komponentów
Animacje: Framer Motion dla płynnych animacji i przejść
Style: TailwindCSS dla responsywnego designu i niestandardowego stylowania
Backend: FastAPI (Python) dla naszych endpointów API i logiki gry
Baza danych: PostgreSQL hostowana na Supabase do przechowywania postępów graczy i tablic wyników
Wdrożenie: Render dla hostingu frontendu i ciągłego wdrażania

Ustrukturyzowaliśmy naszą bazę kodu z architekturą opartą na komponentach, gdzie każda gra jest izolowana w swoim własnym module, ale współdzieli wspólne elementy UI, style animacji i elementy projektowe inspirowane nordyckim stylem. Wykorzystaliśmy niestandardowe hooki dla logiki gry i providery kontekstu do zarządzania stanem w całej aplikacji.

Wyzwania, którym stawiliśmy czoła

Niektóre z naszych największych wyzwań obejmowały:

Różnorodność gier - Tworzenie dziewięciu odrębnych doświadczeń w grze przy zachowaniu spójnego motywu i interfejsu
Optymalizacja wydajności - Zapewnienie płynnych animacji, nawet na słabszych urządzeniach
Integracja backendu - Wdrażanie tablic wyników i śledzenia postępów w czasie rzeczywistym
Równowaga edukacyjna - Tworzenie gier, które są zarówno zabawne, jak i edukacyjne w temacie mitologii nordyckiej

Osiągnięcia, z których jesteśmy dumni

Stworzenie kompletnej aplikacji z dziewięcioma funkcjonalnymi grami w ograniczonym czasie hackathonu
Zbudowanie wizualnie spójnego doświadczenia z elementami projektu inspirowanymi nordycką mitologią
Zintegrowanie treści edukacyjnych o mitologii nordyckiej
Stworzenie intuicyjnego systemu nawigacji przez interfejs Drzewa Świata
Udane wdrożenie śledzenia wyników w czasie rzeczywistym

Czego się nauczyliśmy

Podczas tego projektu:

Udoskonaliliśmy nasze umiejętności w architekturze komponentów React i zarządzaniu stanem
Zdobyliśmy doświadczenie z Framer Motion do złożonych animacji
Nauczyliśmy się skutecznie korzystać z FastAPI dla funkcjonalności backendu gry
Rozwinęliśmy nasze umiejętności optymalizacji grafiki i wydajności gry
Pogłębiliśmy naszą wiedzę o mitologii nordyckiej
Wzmocniliśmy nasz proces współpracy zespołowej i delegacji zadań

Co dalej?

Mamy kilka planów na rozwój Yggdrasil Quest:

Ranking w social mediach
Połączenie aplikacji z systemem rekrutacji na Hacknarok
Rozszerzenie bazy mini-gier do puli, z której można wybrać własne gry na dany poziom
Elastyczna możliwość zmiany tematyki strony i gier