Animal Crossing

Passport Quiz

Created using several web development languages and tools:


  • React

  • Firebase

Our group produced an interactive web app based on the popular video game Animal Crossing. 

We wanted to make something similar to Pottermore where users can create their own accounts and the results of their quiz will be saved the next time they log in.

We also added a villager character directory (all 397 of them!) along with a crossbreeding flower simulation. 

It was an ambitious group project but I had a blast designing the features, coding, and illustrating the visuals with my friends.

Cheryl Wu

Jacinda Eng

Michelle Pham

Israel Sixto-Sanchez

First Iteration

For the first iteration, we focused on HTML and CSS. There were no interactions and we worked on the screen designs and made the quiz's algorithm. 

Our main screens were the landing page, quiz page, character directory, and the account page.

For this part of the project, it was supposed to be a two-person team.

Screen Shot 2020-08-17 at 7.19.17 PM
Screen Shot 2020-08-17 at 7.16.58 PM
Screen Shot 2020-08-17 at 7.16.09 PM
Screen Shot 2020-08-17 at 7.15.57 PM

Final Iteration

Eventually, we were able to use Javascript and incorporate Firebase to keep track of user's accounts. Along with adding interactions, we also improved the design of the screens and even added character pictures to the directory. We also added another mini-feature where we had a flower crossbreed simulator. (This, however, wasn't as fully fleshed out since we were on a time resistant.)

We were given permission to onboard two more people to our group in this stage.

Screen Shot 2020-08-03 at 9.14.29 PM
Screen Shot 2020-08-03 at 9.14.54 PM
Screen Shot 2020-08-03 at 9.16.15 PM
Screen Shot 2020-08-03 at 9.15.35 PM