Zespół pracował w ramach 7 edycji kursu CodersCamp. Aplikacja została wykonana przez uczestników kursu pod okiem mentora.
Mentor: Jędrzej Ratajczak
Uczestnicy:
Wersja demostracyjna aplikacji jest dostępna TUTAJ
Wejdź i sprawdź swoją wiedzę z zakresu technologi webowych.
Celem naszego projektu było dostarczenie aplikacji edukacyjnej mającej formę quizu i pozwalającej na sprawdzenie swojej wiedzy z zakresu technologii używanych w pracy jako frontend lub backend developer.
Aplikację można podzielić na trzy etapy:
-
Etap I - w którym gracz proszony jest o okreslenie szeregu ustawień rozgrywki, takich jak:
wybór technologii (ścieżka frontend lub backend)
wybór poziomu trudności (intern, junior, regular, senior)
podanie własnych inicjałów -
Etap II - właściwy quiz polegający na odpowiadaniu na czas na pytania z wybranego przez gracza zakresu, quiz został zaprojektowany jako zestaw 10 losowych pytań z jedną prawidłową odpowiedzią, którą należy zaznaczyć przed końcem odliczanego czasu
-
Etap III - podanie osiągniętego wyniku i jego pozycji na liście rankingowej
Po podaniu podstawowych parametrów rozgrywki gracz przystępuje do jej zasadniczej cześci czyli quizu.
Po wyświetleniu pytania, gracz ma dwie możliwość: potwierdzić przyciskiem "I have read", że zapoznał się z treścią pytania i przejść do udzielenia na nie odpowiedzi lub nacisnąć przyciśk "Skip" i przejść do następnego pytania. W przypadku podania błędnej odpowiedzi, nie udzieleniu jej w określonym czasie lub pominięciu pytania gracz traci jedno życie. Ich ilość reprezentowana jest przez ikone serduszka w lewym górnym rogu okna przeglądarki. Scenariusz powtarzany jest dla każdego pytania. Postęp quizu prezentowany jest przez pasek postępu usytuowany na dole okna przeglądarki.
Aplikację zaprojektowano tak aby spełnic określone wymagania kursu poprzez zastosowanie konkretnych technologii, standarów oraz konwencji powszechnie stosowanych w procesie wytwarzania tego rodzaju produktów. W procesie developmentu zastosowano elementy metodyki SCRUM. Aplikacja posiada zarówno wersję desktopową jak i responsywną dostosowaną do tabletów i telefonów.
W trakcie developmentu wykorzystaliśmy:
- Miro, do wykonania koncepcji projektu
- Figma, do wykonania mockup'u i dopracowania projektu
- GitHub, do równoległej pracy z kodem oraz zarządzania projektem
- HTML, do definiowania struktury aplikacji
- CSS, do stylowania aplikacji (przyjęto metodologię BEM)
- JavaScript, do wykonania logiki aplikacji oraz elementów interaktywnych interfejsu
- Web API dla JavaScript ( https://quizapi.io/ )
- Fetch API do łączenia z WEB API
- LocalStorage, do przechowywania ustawień gry oraz najlepszych wyników
- Snowpack, do budowy aplikacji i zarządzania zależnościami
- Prettier, do automatycznego formatowania kodu
Dodatkowo w celu wykonania hostingu posłużyliśmy się github pages oraz skryptem budującym projekt i wykonującym jego deploy z wykorzystaniem odpowiednich bibliotek.
W celu uruchomienia aplikacji należy:
- Zainstalować zależności za pomocą komendy:
npm install - Uruchomić aplikację za pomocą komendy :
npm start
Aplikacja będzie dostępna pod adresem: localhost:3000/index.html