Rick and Morty Wiki 🧪💥

This project is a Rick and Morty Wiki. The application consists of a listing of all the series' characters as well as a details page for each one of them. The app also consumes the fantastic Rick and Morty GraphQL API.

It is built with React, Next.js, Chakra UI, Apollo and GraphQL.

Demo

How to run ▶️

The app is live on: Rick and Morty Wiki

Alternatively, you can build it from source following the steps bellow:

• Run git clone https://github.com/VictorLandim/rick-and-morty-wiki.git to clone the repo;
• Run yarn to install dependencies;
• Run yarn test to run the tests;
• Run yarn dev to launch it in development;
• Run yarn build to build it and then run yarn start to launch it in production;

TODOS 🎯

Essentials ⚒

• Create list page.
• Render empty results message.
• Make the design responsive.
• Create details page.
• Implement filters.
• Add meta tags.
• Add route loading screen.
• Add go back button on details page.
• Collapse filter on mobile

Bugs 🐛

• Fix dark mode bug. (Dark mode is still experimental in ChakraUI)

Extra ⭐

• Implement pagination.
• Implement dark mode.
• Test components with @testing-library/react and @apollo/react-testing.
• Turn filter into a form so users can press enter to submit.
• Embed rick and morty icons in Chakra UI.
• Create "loading card" component.
• Implement filters in URL parameters.

Credits 🏆

• Rick and Morty icons by Icons8.