Inspiration
With the theme of the hackathon being about cartoons, we decided to focus on an up and coming type of cartoon. Anime! Alot of people fell in love with Anime recently, especially with the quarantining going on.
What it does
Here is a webapp that scrapes the internet of the most popular Anime currently and allows the user to rank them into tiers.
How we built it
For the backend, we created a RoR API with data coming in from our Nokogiri and openURI webscrapers. We then set up RESTful routes to be called from the backend. From the frontend, we fetched our data from our custom API and queried the anime we needed. Depending on the users queried list, we would render the cover art for the anime's. We then used a React package called react-dnd to utilize their drag and drop features. With this, the user is able to modify state, all with the simplicity of dragging and dropping images into rankings.
Challenges we ran into
A big challenge that we ran into was figuring out how to mutate our data on the frontend. After a long discussion, we figured it best to go with the Redux flow. We quickly implemented that and soon our project was running smoothly all thanks to Redux. With Redux, the drag and drop feature was also able to mutate data just with the dragging and dropping aspect.
Accomplishments that we're proud of
An accomplishment were proud of is learning and utilizing a new package that we have never used before. This package was the react-drag and drop package. With a very complicated flow, we were able to implement this package all in React Hooks. The impressive thing about this package is that there is data tied to the draggable items, and depending on where the items land, that data is being mutated. Mutating and filling out data has never been more fun.
What we learned
We learned alot about React Hooks. Transitioning from class components to React hooks definitely takes some time, but theres no better way to learn than practice. We also learned how to work really well together. There is a VS Code extension called Liveshare that really allowed us to help each other debug, think of logic, and even for moral support. Liveshare turns your code editor essentially into a google doc where multiple users can simultaneously make changes to one file at the same time. All while on video chat, we were able to pair program with ease.
What's next for animeranker
Animeranker has so much more to go. A user sign in / sign up function with accounts to save your previous rankings. A ranking activity board to see how other people ranked other lists. More list queries to have access to other animes. This is just the start of Anime Ranker and we couldn't be more excited.
Log in or sign up for Devpost to join the conversation.