Inspired by vhHack's adorable mascots and authentic ocean theme, when we came across the Pokémon APIs, we thought it would be a great chance to explore APIs while designing an under-water inspired theme for this hackathon. Through building this platform with playful Pokémon and calming animations, we wanted to invoke a similar positive emotion that we experienced with the hackathon theme.

What it does

We created a platform with a collection of ocean-related pokémon cards where anyone can search and find all types of Pokémon all in one place. It is organized based on element types and designed in a way that can enlighten Pokémon fans and communities alike.

How we built it

We built our website using Replit to share code and collaborate with each other. Since many of us are not familiar with React. We decided it was a perfect opportunity to learn it by incorporating it in our app. And as for implementing the designs, we first used Canva to design then we styled it with HTML and CSS.

Challenges we ran into

The design part was fairly straightforward; however, the difficult part was implementing those designs into the website, while connecting the API information to parts of the Pokémon cards. There were several issues when we tried to implement the tabs. It was difficult in managing the states while keeping the pokemon type working.

Accomplishments that we're proud of

We are proud of the styling and seamless design that went into the website development, along with the animation and hover elements that add life to the platform.

What we learned

We learned how to merge APIs with website building, where we had to use reactjs and more in order to connect the information.

What's next for Ocean Dwelling Pokémon

In the future, we hope to eventually implement the rest of the pokemon elements such as earth, fire, etc. to allow for a more diverse user experience, including creating new environment animations. We would also like to learn how to add a search bar so that it's easier for users to find specific pokemon instantly.

Team Members Discord:

lishy#4802 Gill Bates#0169 BeepHija#1816 Cyra Alesha#7977

Built With

+ 3 more
Share this project: