RBY Pokemon Challenges

RBY Pokemon Challenges 2021-

A Pokemon project that is broadcast on Youtube. The accompanying NextJS Website utilizes Framer Motion, API routes, global states, local storage, and custom hooks.

Websitehttps://rby-pokmon-challenges.vercel.app/
PlatformWeb App
StackNextJS for frontend with NextJS API routes for backend

RBY Pokemon Challenges Top Page

Built on NextJS, it uses React Context with useEffect hooks to import Pokemon Data from the NextJS API to create a global Pokedex and randomize 3 Pokemon for the top-page randomizer. Choosing a Pokemon stores it in a local Pokedex stored on Local Storage.

Pokemon Randomizer

Utilizing Framer Motion, the Pokemon actually appear to come out of the pokedball when clicked and each Pokeball has CSS animations to shake when hovered.

Custom Framer Slider

Using the drag features of Framer Motion, the slider can be used with a mouse or touch devices to scroll through a horizontal list of videos. The iframes for the Youtube players are also automatically resized based on the viewport, so they always maintain the correct aspect ratio on page load.