Rick and Morty
React Web application that allows users to search for Rick and Morty characters, locations and episodes. Implements therickandmortyapi.comand takes advantage ofNext.jsstatic page generation to provide a fast and performant experience.
Purpose & goal
This project was meant to be an un-official implementation of the Rick and Morty API, which would allow me to only worry about the frontend, but still have a solid level of complexity to work with.
I focused on learning about Next.js and its environment, considering multiple data fetching methods and how to implement them in a performant and smooth way, avoiding loading states as much as possible.
Stack & Explanation
Along with Next.js, I chose Stitches for styling, Radix for UI components and Vercel for deployment.
All these technologies coupled with TypeScript allowed me to have a great development experience and avoid quite a lot of headaches.
The complex part of this project was the data fetching, as I wanted to have a good user experience with pagination on the gallery, and also fast navigation between dedicated pages.
To achieve this, I used the getStaticProps method from Next.js, paired with useSWR to keep the data fetched cached and avoid unnecessary requests.
What I learned
Using Radix was a breeze. It's a great library that provides a lot of components and utilities that just work. Although, I had an issue where the tabs unmounted when switching, losing the pagination state and having to re-populate the data every time. I spent quite a while and too many coffees figuring out the solution, but I ended up preventing the unmount, and everything else worked just fine.
Overall, I learned a lot about Next.js, next/image, data fetching and accessibility.