PokéRef is a Pokémon encyclopedia built with Next JS, Typescript and Scss modules and uses data from PokéAPI, Smogon and PokémonTCG
You'll find a ton of information on every Pokémon, moves, abilities, items and a lot more
Leave a 🌟 if you like my project 👍
Table of contents
✅A page for every Pokémon / move / ability / type / item and more
✅Filter Pokémon by name / form / generation and type
✅Filter moves / abilities / machines by name
✅Fuzzy search for Pokémon / moves / abilities and items pages
✅Change certain data according to the game selected
✅Pokémon cries (up to Pokémon n° 721)
✅Competitive information for every Pokémon with data from Smogon
✅List of every Pokémon cards for every Pokémon
✅Dark and light mode
✅404 page
✅Fully responsive
✅Use of Tanstack-Query to fetch data only once by using cacheTime: Infinity and staleTime: Infinity. The data will very rarely change so there is no use in re-fetching it every x minutes / hours
✅Use of Next JS next/image to optimize images. Very important for this app because some pages (like the index.js or the items.js) have a lot of images and they are one of the main problems regarding my performances so optimizing them to make the loading faster is very important
✅Turned into a PWA with the next-pwa package
✅Paginated pokedex, moves, abilities and items pages
✅Head with fitting title, description and keywords for every page (static and dynamic)
✅Sitemap with every static and dynamic pages
- Have PNPM installed (optional)
git clone https://github.com/thibaudbrault/PokeRef.gitpnpm installpnpm devMy main goal for this site was to get better at React JS and to learn how to use an API and to use Styled-Components.
I chose to use PokéAPI because there are a lot of tutorials to start from, the documentation is very clear and easy to use and there is a ton of information so I could make a bigger site with multiple pages.
- Started by using vanilla JS + Scss to learn how to fetch data from an API in vanilla JS
- Quickly moved to React JS + Scss to learn React by working on a big project
- Moved to React JS + Styled-Components to learn a new way to write CSS. It was a good move for me because I really like Styled-Components because it has the advantages of Scss, is easily importable / exportable between files and supports theming.
- Added React-Query to fetch data. It's a great library that makes it easy to manage caching, fetching, loading and error handling for every data fetch.
- Finally moved to Next JS (instead of CRA) + Styled-Components to learn to use Next JS. I chose to use Next JS to benefit from the image optimization given by the
component because the app has a lot of images to render and every optimization is welcome. I also chose it to benefit from the Static-Site generation.
- Upgraded to Next 13. There were some problems that made the transition to using the app folder instead of the pages one not possible, but I benefited from the changes to the
component (it no longer creates spans) and the component (it no longer need to have an anchor tag inside).
- Added React-Table and converted all my tables to benefit from virtualization, sorting and filtering for every column making it easier to find the desired information.
- Changed all the structure folder and moved from Styled-Components to Scss modules.
- Learning to fetch data from an API and use this data. That was the first time that I've used an API and at first I had problems to understand how the fetch API worked and how to use and display the data returned.
- Moving to Styled-Components. Not a big problem because it uses nesting like Sass so I didn't have to modify a lot of CSS, but I had to learn how to create global styles and how to create themes and switch between them.
- Implementing an infinite scroll (now removed) in React with react-infinite-scroll-component. I had problems with creating the function that fetches more data and the function that says when there are more elements to return. Maybe I'll try to implement it with React-Query but it's currently not a priority.
- Tried to virtualize the moves, abilities and items pages' lists. I tried to implement it by using react-virtualized and react-virtuoso, but I had a few problems (the main one being that it did not take into account the sorting of the list and returned the list without it).
- Implementing React-Query. I had to learn how to modify my custom hooks to make it work with React-Query and how to import the data from the hooks. It took me some time to make the transition works, but I don't regret it because my code is more readable (mainly the part where I import my hooks, but also the way I handle the loading state to return an animation while the data is being fetched) and it's an easy way to cache data.
- Moving from CRA to Next. The main problem I had was learning to use dynamic routing and when I understood it the migration became easier. It still took me some time because I had to move all my files in other folders, change the paths in imports, implement the
component along with a width and height, correct some problems with the images (the creation of multiple spans wrapping the image that was solved by using next/future/image before moving to Next 13) and a few other problems with the component (the fact that it can't have multiple children, that it needs to have a 'href' instead of the 'to' used in react-router to give the path and that you need to put an anchor tag inside the Link and use passHref).
- Converting all the files to Typescript and declare all the types.
- Make my components fully reusable.
- Pokémon : basic data, evolution line, moves that he can learn, ...
- Moves : basic data, effect, Pokémon that can learn it, ...
- Abilities : effect, Pokémon with this ability (normal or hidden), ...
- Types : effectiveness against other types, Pokémon with this type, ...
- Items : effect, flinch power, ...
- Machines : list of TM and HM for every game
- Locations : every place and the Pokémon that can be encountered
- And much more
A huge thanks to everyone that helped me by answering to my questions on Stack Overflow and Reddit.
A big thanks also to the PokeAPI team for creating such a huge, detailed and very well organized API.
Tanstack React-Query
Tanstack React-Table
React Hook Form
React Select
React Paginate
Fuse.js
ESLint
Prettier
Next PWA