Harry Potter Quiz
A project for anyone who loves the universe of Harry Potter wants to be challenged with the quiz.
It was inspired by numerous videos on Youtube where influencers compete in who knows the universe better. I always wanted to create something similar and gamify the experience.
This particular Quiz is equipped with different levels of difficulty both for casual fans and real Potterheads.
Esthetically I was inspired by official Harry Potter site that transports you to the mystical magical world.
Structure
The app is pretty straightforward. It has a landing page with a start button that leads to the quiz.
The app is structured in a way that the user goes through the series of questions and has several options to choose from. All the answers are memorized and the user can see the results at the end.
Development
I started with installing the React Create App to initialize the project. The basics like the root component, gitignore and styles were set up first. The idea was to develop the app as fast as possible, so I decided to go with the React and Redux.
Next I created a separated file to store all my questions and answers. I decided to go with the array of objects that contain the question, answers and the correct answer.
The components like <Questions>, <Answers> and <Results>, were created next. Each contained in a separated folder for clear structure.
Since the calculation logic was pretty simple, I decided to go with the Redux to store the state of the app. The reducer file contained the logic for `start`, `back`, `next`, `answer` and `restart` actions.
Design
Below are the digital assets I used for the app: favicon, logo and custom result image.
I have created a custom illustration for future development to have tiers of difficulty for users:
Conclusion
Main React features used to build the app quickly were:
- React hooks - `useEffect`
- React Router - `useNavigate`
- React Redux - `createStore`, `bindActionCreators`
My Redux was organized and structured in a way that it was easy to add new features and actions.
Through this project I have learned that the most important thing is to have a clear structure and plan before starting the project. For example, for this one I had to think about the interactions between the components and the state of the app first and then move to the design. I have also thought what would be most user-friendly and engaging way to interact with the app and have a motivation to re-start it and use over and over.
Next Stage
In the future I want to return to this project and add more features like the ability to choose the difficulty level and the ability to share the results on social media.
I would also add more images and animation to make the process more engaging and fun.