Wizarding World App

Welcome to the Wizarding World App! This is a React-based web application that allows users to swipe across characters from the Harry Potter universe. The app fetches data from an external API and displays character information, including images, when available.

Technologies Used

This app was built using the following technologies:

• React
• JavaScript
• Vite.js
• HTML
• CSS

Features

Here are some of the features of the Wizarding World App:

• Fetches character data from an external API
• Displays character information, including images and additional info
• Changes the frame colour based on the specific house of the character
• Allows users to swipe across characters
• Modifies the cursor to look like a wand
• Plays thematic music in the background

Getting Started

To get started with the Wizarding World App, follow these steps:

1. Clone this repository to your local machine
2. Install the necessary dependencies by running npm install
3. Start the development server by running npm run dev
4. Open your web browser and navigate to http://localhost:3000 or wherever it will render

Theme Description

The Wizarding World App features a theme that is inspired by the magical world of Harry Potter. The app uses colours and designs that are reminiscent of the four Hogwarts houses: Gryffindor, Hufflepuff, Ravenclaw, and Slytherin. In addition to the visual theme, the app also modifies the cursor to look like a wand and plays thematic music in the background.

Contributing

If you would like to contribute to the development of the Wizarding World App, please follow these steps:

1. Fork this repository
2. Create a new branch for your feature or bug fix
3. Make your changes and commit them to your branch
4. Push your branch to your forked repository
5. Submit a pull request to this repository

Credits

The Wizarding World App was created by Jaroslav Krbec. Special thanks to the following resources for providing data and inspiration:

• HP API (incomplete but at least somtehing 🙂 )[https://hp-api.onrender.com/]
• David Šetek’s Tutorial series on React[https://www.youtube.com/watch?v=RdDzoVJOxX4&list=PLQ8x_VWW6Akua8I5spV8nHIWlG6_tX6dx]
• cool background image from [https://res.cloudinary.com/practicaldev/image/fetch/s–N1y_jUJW–/c_imagga_scale,f_auto,fl_progressive,h_900,q_auto,w_1600/https://thepracticaldev.s3.amazonaws.com/i/jtpbp4dmoudsk7y4cqsw.jpg]
• sound effect from [http://soundfxcenter.com/sound-effects/harry-potter/12]

GitHub

View Github