Skip to content

Navigation and game app for AGH open day build with React Native

Notifications You must be signed in to change notification settings

WojciechBarczynski/FrAgile

Repository files navigation

Wizja

Podstawowa wizja projektu:

Celem projektu jest urozmaicenie dni otwartych AGH w D17, tematem projektu jest aplikacja mobilna umożliwiająca uczestnikom imprezy na wygodne odwiedzenie interesujących ich stanowisk. Podstawowym działaniem aplikacji jest nawigowanie uczestnika pomiędzy stanowiskami oraz przedstawianie mu tematycznych quizów / minigier przy kolejnych stanowiskach.

Zasada działania:

Użytkownik włącza aplikację i wyświetlana mu jest lista ze stanowiskami i ich opisami. Użytkownik wybiera interesujące go pozycje, ustawia je w kolejności w jakiej chciałby je odwiedzić, kiedy użytkownik jest już zdecydowany zatwierdza swoje wybory. Po zaakceptowaniu aplikacja przechodzi w stan nawigacji, zaczynając od ekranu skanowania kodu QR. Każde stanowisko posiada swój unikalny kod. Po zeskanowaniu kodu pierwszego stanowiska wyświetla się strzałka kierująca użytkownika do kolejnego stanowiska z ułożonej przez niego listy. Kiedy Ten proces powtarza się aż do zakończenia zwiedzania.

Dodatkowe funkcje:

Poza strzałką użytkownik widzi mapę z jego aktualną pozycją i trasą do następnego stanowiska.

Użytkownik wypełnia quiz / minigrę przy obecnym stanowisku.

Makiety UI

Ekran startowy

Na ekranie startowym użytkownik jest powitany i może wybrać swój pseudonim.

Ekran z listą stanowisk do wyboru

Użytkownik wybiera interesujące go stanowiska z listy, która zawiera tytuł, króki opis oraz miejsce. Wybór interesujących aktywności odbywa się poprzez zaznaczenie checkboxa.

Ekran z preferencjami kolejności stanowisk

Po zaznaczeniu stanowisk użytkownik przechodzi do ekranu z preferencjami kolejności odwiedzania stanowisk. Użytkownik może zmieniać kolejność przeciągając elementy listy.

Ekran z mapą i trasą do następnego stanowiska

Po zatwierdzeniu kolejności użytkownik przechodzi do ekranu z mapą i trasą do następnego stanowiska.

Ekran ze skanowaniem kodu QR

Użutkownik skanuje kod QR na stanowisku lub wpisuje kod.

Ekran z quizem

Po zeskanowaniu kodu QR użytkownik przechodzi do ekranu z quizem.

Welcome to your Expo app 👋

This is an Expo project created with create-expo-app.

Get started

  1. Install dependencies

    npm install
  2. Start the app

     npx expo start

In the output, you'll find options to open the app in a

You can start developing by editing the files inside the app directory. This project uses file-based routing.