A catalog of characters from the Rick and Morty series. This project was created using Next.js and integrates with the Rick and Morty API. It includes a list of characters with search and pagination features, and a detail page with the option to favorite a character.
- Pagination
- Filters by name, status, gender, and species
- Favorite characters in list and detail pages
- Responsive layout
- Optimized images
- Incremental Static Generation
- Cache for API requests
- Minimal and performant render
- Next.js
- TypeScript
- Styled Components (Atomic Design)
- MobX / Mobx-Persist-Store
- Axios
- Zod
- React Hook Form
To persist the store across sessions, the mobx-persist-store library was used in combination with localForage to save data in the browser's IndexedDB storage. This enabled easy integration with MobX, allowing the store to be cached and retrieved even after the browser is closed. Additionally, a custom hook called useClientSideStore was created to solve hydration problems, ensuring that the store was properly initialized on the client-side and avoiding inconsistencies between server and client data.
You can see this project in action, click here
- Clone the repository:
git clone https://github.com/pedrogpo/rick-and-morty.git - Navigate to the project directory:
cd rick-and-morty - Install dependencies:
yarn install - Run the development server:
yarn dev - Open http://localhost:3000 in your browser
This project includes unit tests using Jest and React Testing Library. To run the tests, use the command yarn test.
This project was built with a focus on performance and optimization, avoiding unnecessary renders and requests. Incremental Static Generation was used to generate pages statically at build time and at runtime, reducing the response time for users. The images were also optimized to ensure faster loading times.
This project is licensed under the MIT License.