OstatniMilioner.
W pełni responsywna, interaktywna aplikacja webowa typu multiplayer — wciągające quizy na żywo ze znajomymi w czasie rzeczywistym, z mechaniką przetrwania i rankingiem.
O projekcie
Teleturniej na żywo, w przeglądarce
Aplikacja inspirowana klasycznymi teleturniejami łączy rywalizację ze znajomymi w czasie rzeczywistym z mechaniką przetrwania. Odpowiadasz poprawnie, zdobywasz punkty i walczysz do końca — jeden błąd oznacza odpadnięcie z walki o tytuł, choć gra wciąż toczy się w rankingu. Całość działa w przeglądarce, bez instalacji, na komputerze i telefonie jednocześnie.
Funkcjonalności
Wszystko, czego potrzeba do rozgrywki
Rozgrywka real-time
Błyskawiczna synchronizacja stanu gry, pytań i wyników pomiędzy wszystkimi graczami a hostem przez WebSockets.
System pokojów (lobby)
Gracze dołączają nickami, a host otrzymuje generowane, unikalne 4-znakowe kody autoryzacyjne sesji.
Eliminacja i ranking
Zła odpowiedź eliminuje gracza z głównej gry, ale pozwala wspinać się w tabeli wyników po punkty pocieszenia.
Nowoczesny wygląd i animacje
Atrakcyjny interfejs z motywem glassmorphizmu i płynnymi, zaawansowanymi animacjami komponentów.
Panel administracyjny
Zintegrowany, chroniony rolami panel CMS do zarządzania, edycji i dodawania nowych pytań do bazy.
Architektura mobile-first
Smartfon jako kontroler gracza, duży ekran u hosta — klasyczny model „second-screen experience”.
Panel administracyjny
Zarządzanie bazą pytań bez dotykania kodu
Zintegrowany CMS chroniony systemem ról umożliwia twórcy gry pełne zarządzanie bazą pytań — dodawanie, edycję i usuwanie z poziomu czytelnego interfejsu. Dzięki temu rozbudowa quizu o nowe rundy nie wymaga żadnej ingerencji programisty.
Zastosowanie
„Second-screen experience” na imprezę i stream
Aplikacja sprawdza się podczas imprez ze znajomymi, streamów i spotkań online. Dzięki architekturze mobile-first gracze używają własnych smartfonów jako kontrolerów, podczas gdy pytania wyświetlane są na dużym ekranie u hosta.
Stack technologiczny
Realtime, typowanie i chmura
Frontend
- check_circleReact 18
- check_circleTypeScript
- check_circleTailwind CSS
- check_circleFramer Motion
- check_circleLucide Icons
Backend & Realtime
- check_circleNode.js (Express)
- check_circleSocket.io
Baza danych & Auth
- check_circleFirebase Firestore
- check_circleFirebase Authentication
Masz pomysł na aplikację?
Zbudujmy Twoją aplikację webową
Od interaktywnej gry real-time po rozbudowane narzędzie z panelem CMS — porozmawiajmy o tym, co chcesz stworzyć.