Hogwasrt Sorting House App

Description:

Hogwarts game. How have to guess to which house belogs a hero.

Here is the main flow:

• The app consists of 3 screens: Home, List and Details.

• Display randomly selected personage on the Home screen (photo and full name of character).

• Load different personage by pull-to-refresh gesture on the Home screen.

• Allow to click the House buttons to guess the affiliation of this character.

• On every choice, recalculate total/success/failed affiliations and display numbers in the boxes at the top of the Home and List screens.

• The “Reset” button should flush all previously guessed personages and make all total values equal to zero.

• On the List screen display previously guessed affiliations (successful and failed) and the amount of attempts for every character (until successfully guessed). After successfull guess score resets to zero.

• By clicking on the Reload button against the particular character, load this character on the Home screen with the House buttons again.

• By clicking on the character item row on the List screen, open the Details screen. Display personage information only in case this personage has been guessed right.

What did I add:

• If you guessed the hero it auto renews if not you can repeat till the wholy victory.

• For tests simplyfing house is written under the hero name.

• Linter is done.

Design:

mockup

Status:

Done.

Screenshots and video for IOS are bellow:

ios.mov

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2024-11-08.at.21.12.03.mp4

Screenshots and video for Android are bellow:

2024-11-08.22.00.06.mp4

Technologies list:

Howgwarts features:

FEATURES

What I did and what I could not:

• I did it with Expo but it also could be a React Natice CLI

• Instead of Expo-router it is possible to use React Navigation or React-router

• I used React-query but it could be React-Context or Redux

• I did not use React.memo, useMemo & useCallback not to overload this shy app, but React-query providers state isolation by setting up every property separetely.

• I made a custom hook to simplify access to state via React-query and reduce amount of code. Seems it looks better

• For some icons I used react-native-vector-icons lib

• I did not manage to do smooth animation between screens, it created problems.

• I did not manage to reproduce design completely, especially styled borders.

Usage:

npm install

npx react-native start

Reflection

It seems working as expected. It was an extremely interesting and developing journey through the mobile Hogwarts adventures with React-query.