Welcome to Hogwarts

Table of Contents

• Introduction
• Deployment
• Technologies
• Set Up
• Features
• Organizational Resources
• Future Features
• Reflection
• Contributors
• Project Specifications

Introduction

Welcome to Hogwarts is an app to show more information about characters to kids. Users can see characters images and information about themselves and Hogwarts. Also, if you like them and keep them, just add your favorite list or delete them. 😍

This app fetches data from Harry Potter API.

Deployment

👉 Click here.

Technologies

• JavaScript
• React (hooks and proptypes)
• React Router
• HTML
• CSS
• API fetch
• Cypress (E2E testing)
• Heroku
• Figma & FigmaJam

Set Up

1. Clone this repository.
2. cd into the directory.
3. Run npm install.
4. To run tests, run npm run cypress.
5. Start the server by running npm start and view at http://localhost:3000/.
6. Enter control + c to stop the server at any time.

Features

• User can view all characters on page load
• User can click on a character and see their details
• User can favorite and unfavorite a character
• User can see all of their favorite characters on the favorites page
• User can use the left and right arrow to flip through the three pages
• User can use the GO HOME or GO TO FAVORITES buttons to go to those designated pages
• User will be taken to an error page if they enter in a non-existent url

Organizational Resources

• GitHub Project
• Figma for wireframe

Future Features

• User can sign in to login page
• Use Harry Potter's map for log-in page on styling
• User can search for a character on Home Page
• Harry Potter theme song plays on page load
• User can put characters in a future queue

Reflection

• During this project I learned how to research and implement new technologies in a short amount of time. By taking time to research what I needed from the new technologies I was able to implement them in a more timely manner.
• Although the learning curve for cypress was a bit steep at first, it was extremely rewarding. Cypress made it possible to test error handling with our server, and made sure we could test different user flows.

Contributors

• Betul Baskan

Project Specifications

• Project specs are located here