Anime Hero: Your Ultimate Anime Finder Web App with AWS Amplify
GX Anshu | Thu Jul 08 2021
I take 1 day to learn about the react js basic i search on YouTube and Google to learn REACT js and final i learn all the basics like,
- State And Props
- Functional And Class Base components
- CSS in JSX and Tailwind in React
after all i create a
letter on i install Tailwindcss in react app and then never write CSS in react app i use classes of tailwind CSS and provide a nice look to web App but i have no any UI design in my mind so try on google but i do not get any of cool and nice design on anime website later on i find tailblocks as my helper in my UI design due to lack of time to create app i decided to take UI from the Tailbocks and the create my web app.
I got little bit everything for my web app and now there is a big problem with my web app i have not data to show on the website like Anime name and staring date and ending date all the data related to the anime and i have no time to download the data from the internet and then show on the web app so i want a API which provide me all the data related to anime i try to find out so many API but some are paid or some are not working for me.
Now finally i found a API name as Jikan but i don’t know how to use it
now its time to understand how this API work after to many Google search and Watching some YouTube Videos i found how to use it and now let fetch this API in in our react app so go to the app.js file of react app and start fetching the data from the API and store in the state on the class components
and now i have the biggest problem in my app i try to fetch the API and the then send in the state and then want to send the state data the props of other components but my data from the API take time to fetch . i all ready know that i can fix this problem by simply using asysnc and await but the problem is i never try to study this topic.
so after so so so many searches and watching video finely after working 5 hours i got errors and errors only .
so i think i need to take some rest and then start working this time is 11 pm so i desired to sleep and then work early in the morning. after wake up i open the computer and re start the programming and thank you so much to stackoverflow my code is working fine .then on just code and code and finally i create this app and deploy on AWS amplify..
thank you so much..
so finally lets toke about the application i use these technology to build this app
- React JS
- Tailwind css
- matarial ui
- some APIs
one the first screen of app you can see some details of random anime data
as you scrol down you can see a button and a search bar where you can search and click the button and to get the best suggestion of animes
and when ever you search for your anime you got a watch link this anime for free
these are the work of my app this help you to search anime fast and also provide a watch link to watch it this one solve i favorite problem..
that all in my app thank you much to read this article finally done.
If you want to see the live demo then click on this link Live demo
And if you want to see the code then check it out in GitHub repository GitHub repo