Wizarding World App using React
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:
- Clone this repository to your local machine
- Install the necessary dependencies by running
npm install
- Start the development server by running
npm run dev
- 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:
- Fork this repository
- Create a new branch for your feature or bug fix
- Make your changes and commit them to your branch
- Push your branch to your forked repository
- 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]