This is a simple database application which integrates with an open source Harry Potter API which I found recently deployed on Heroku. It has end-points exposing details of spells, characters, potions and other things which exist in Harry Potter universe.
I recently learned about Redux toolkit in one of the courses I was enrolled in for learning React. This course had this project which used Redux toolkit for API data management through redux store. It uses service and slice based architecture and does not have separate actions file like in conventional redux based applications in React. I decided to use this API, create an app and experiment with the Redux tool kit approach of handling store data. That's just a brief story about why this app came into existence.
As for UI, I try to experiment with different UI frameworks available for React and Vue. In this case, I went with Blueprint UI which is one of the popular UI frameworks for React having 18K stars on Github. I found it relatively easy to get started with, has a wide range of components to offer and a nice color schema.
Made with ❤️ by @apfirebolt
Please find me here
- Demonstrates use of Redux store management for API data in React using Redux toolkit.
- Demonstrates use of Blueprint UI for React Components like cards, buttons, accordions and more.
Simply install node modules for the React app and you're done at least for the development mode.
npm install
npm start
For production, build the frontend of the app.
npm run build
npm start
API data for the character section is far from complete, there is data available only for 15-20 characters from the franchise. API developers might address this later after which this would be updated. But, that is not a big issue.
- Expect UI improvements in near future for this app as I get more familiar with Blueprint UI.
- Search bar to be added for searching spells, ingredients and more.
Please find some of the screenshots of the application.
