This website was built to be a place to learn all about Harry Potter. You can learn about the key characters, the houses and common spells. You can also try your hand at the sorting hat to see which house you would be place in if you were a wizard.
- Initial Wireframe
- this is my initial thinking of how I want my page to work.
Define the the React components and the architectural design of your app.
- Find an external API for Harry Potter info.
- Develop an app that displays the info and can be interacted with.
- Create links to each category (characters, houses, spells)
- Show a sorting hat on the main page to use for sorting the user into a house.
- Create pages for each of the categories to display details on.
- Use the Harry Potter font on my page.
- Find a second API with images for Harry Potter
- Add a place to save your favorite characters or spells.
- Log which house the user was placed in even if the page refreshes.
| Component | Description |
|---|---|
| App | This will make the initial data pull and include React Router |
| Header | This will render the header include the nav |
| Main | This will render the main page |
| Characters | This will render characters page |
| Character Details | This will render the character details page |
| Houses | This will render the houses page |
| Spells | This will render the spells page |
| Sorting Hat | This will render the sorting hat page showing the house you are in |
| Component | Priority | Estimated Time | Time Invested | Actual Time |
|---|---|---|---|---|
| Planning | H | 4hrs | 3hrs | |
| Create all initial files and initial React setup | H | 3hrs | 1hr | |
| Connect to API and show it responding | H | 2hrs | ||
| Develop code for App | H | 2hrs | ||
| Develop code for Header and Main | H | 4hrs | ||
| Develop code for characters, houses, and spells | H | 8hrs | ||
| Develop code for sorting hat page | H | 3hrs | ||
| Stylize the app | H | 5hrs | ||
| Work on final documentation | H | 3hrs | ||
| Total | H | 34hrs |