/React-Sorting-Hat

Primary LanguageHTML

React Sorting Hat - Stretch Assignment

Welcome to Hogwarts, the School of Whitchcraft and Wizardy. One of the tools that is used by students of Hogwarts on their first day entering the school is notoriously known as the Sorting Hat. Your goal throughout this stretch assignment is to build the Sorting Hat using ReactJS.

Project Set Up

  • cd into react-sorting-hat directory and run yarn install to retrieve your dependancies.
  • run yarn start to spin up your webpack development server
  • Inside of ./react-sorting-hat/src create a directory called components and start to think about all of the components you'll need for this application.

Project description and requirements

  • As a student stepping into the great hall at Hogwarts should be greeted with a message and I should be able to click a button that will initiate the sorting process.

  • I should then be asked a sequence of 6 questions that will determine to which of the 4 Hogwarts Houses I should belong.

  • When sorted, I should receive a message about which house I now belong in, that will include a history of the house and some unique facts about what type of people belong in the house.

    • The message page should be decorated to follow the house colors and crest.
    • As a part of this message I should also be informed of any Famous Wizards that have come any gone through my house.

  • Use this guide to help craft your questions about the characteristics of each house.

  • In the event of a tie, simply randomize and select a house from the two options.

Stretch Problems

  • Redo this entire project using VueJS.
  • Look into Firebase for data persistence.
    • Use Firebase to build out a Login System so that as a user I can login to the app and have all messages be directed at my name.
    • All data tracked through the app should be stored in firebase.
  • Allow me (the user) the ability to share my hogwarts house decision to my social media platform of choice.