Animal Crossing Passport Quiz
INFO
With the launch of the Animal Crossing New Horizons game, my team and I in our client-side development course designed and developed an Animal Crossing Passport Quiz website for users to find out which villager matches their personality, learn about the different villagers in the game, and experience a breeding flowers simulation. This website took six weeks to create with HTML/CSS, Javascript, React, Bootstrap, Firebase, and GitHub.
PROPOSAL
What problem is this app addressing/solving? Many personality quizzes online are not data-based and are purely for entertainment purposes. Quizzes such as these are a source of misinformation for users as they may believe that they their resulting character is truly most similar to their personality.
Who is the target audience? This web application is geared toward players of the Animal Crossing game series, however anyone is welcome to try it out and learn more about the characters in the game.
How does the app solve the stated problem? This app will solve the problem of online quizzes misinforming users about their results because our team is sourcing data from Nookipedia and are connecting the personality traits of the user with the characters in order to determine an accurate result and asking questions that directly correlate with these two subjects.
Color Palette
These colors are inspired by the Nintendo Switch Animal Crossing: New Horizons Edition in order to represent the vibe and theme of the game.
First Iteration
The screens below are from the first version of our website. The user would first be welcomed to the website with the Tom, Timmy, and Tommy animation page and prompted to create an account. Once successfully logged in, they take the personality quiz or learn more about the villagers through the card filters. My role in the project was coding the backend and designing the user-experience of the personality quiz and villagers card filters. The initial prototype was coded in HTML/CSS and Javascript.
Final Iteration
The demo below is from the final version of our website. Some features and improvements we added to this version was the breeding flowers feature, images to the villagers card, and the capability to save the last quiz result character for each profile. My role for the second iteration was coding the backend of the homepage, personality quiz, breeding flowers feature and connecting the authentication to Firebase. The final iteration was coded with React and Bootstrap and incorporated Firebase as the database to collect user login information.
Demo of the website showing the authentication, homepage, personality quiz, village directory and breed flowers features.