HARRY POTTER

Installation Instructions:

1. Select fork.
2. Decide where you want to clone this repo in YOUR terminal.
3. Select the Code button and copy the SSH provided.
4. YOUR terminal command should look like the line below.
5. git clone [email protected]:ZTFitru/harrypotter.git
6. Move into the directory using cd [dir_name].
7. Run npm install or npm i to install dependencies.

Overview:

• While attending Turing School of Software and Design, I was assigned to create a React application to showcase my understanding of React. This application allows Harry Potter fans explore the world of wizards and witches that are mentioned in the books or have been seen in the movies. This application gets the data from an API I created using an express server and running on Vercel. When the user visits the application, they are greeted with a clickable door. Once they click on the door, the door will open and a button will appear for them to click it. Once they click it, they will be taken to a page where all the characters are displayed. They have the option to click on the four houses in the navigation bar, they can click on the search icon to look for a character or they can find and select a character from the list. If they click on a character, they can view details about the character. There is a small detail about the character and what group they are loyal to. They have the ability to select the loyalty tag to view all the characters that belong to that group. A user can also build their own loyalty group by adding a character to their list.

Visit Our Website:

Harry Potter

Preview of App:

Learning Goals:

• API integration: Retrieve and display data effectively from an open API
• User Interaction: Implement functionalities that allow users to store and manipulate displayed data.
• Routing: utilize React Router to manage multiple views within the application.
• Responsive Design: Ensure the application is visually appealing and functional across multiple different devices.
• Deployment: Successfully deploy the application on a platform.
• Code Quality: Incorporate PropTypes for all components and ensure best practices in code organization and testing.

Wins & Challenges

• Wins

  • After given a lesson on express, I was able to create an express server for my API. I wanted to create an API that would work for the React application I was creating.
  • I had trouble trying to figure out how to make the door in my landing page to open like they did in Harry Potter. After playing around with the css, I think I have come close to the main door at Hogwarts.

• Challenges

  • I wanted the colors to change based on the house colors when a user hovered over the text in my navigation bar. To fix that problem, I had to style my color hovering effect in my components JS file instead of my CSS file.

Technologies