A Pokédex with an (almost) infinite Pókemon feed and specific info on the different Pókemon. You can also search for specific pocket monsters, and save your favorites for ease of access. Developed as part of Ioasys Camp IV - Frontend track. Besides taking part in this bootcamp, I have no relationship whatsoever with Ioasys.
Table of Contents
Welcome to your go-to app for finding out all (or almost all) there is to know about Pokémon! Tired of endless doom-scrolling on Instagram? Come endless doom-scroll on our PókeFeed™,! Want to find out more about a specific pocket-sized monster? Use our search feature! Suffering of an unquenchable thirst for Pokémon knowledge? Click any Pokémon to drown yourself in its stats! Find yourself coming back over and over again for some juicy Porygon trivia (I'm not judging you, buddy, whatever floats your boat)? Add it to your favorites and make it super easy to scratch that itch. Now go catch them all, you beautiful trainer! Developed as part of Ioasys Camp IV - Frontend track. Besides taking part in this bootcamp, I have no relationship whatsoever with Ioasys (we can still change that though, you know how to reach, Sweet Pea, pls get in touch 😢)
- React.js
- Styled Components
- Redux
- Redux Toolkit
- Redux-Saga
- Radix-UI
- Storybook
- Jest
- React Testing Library
To get a local copy up and running follow these simple example steps.
- npm
npm install npm@latest -g
- Clone the repo
git clone https://github.com/francisko-rezende/ioasys-campIV-pokedex.git
- Install NPM packages
npm install
(yarn should work fine too, I used npm in these instructions because yarn's installation instructions seemed more complicated than npm's)
- Have fun!
Like a Magikarp, this app is simple yet powerful. You can browse the different Pokémon using the feed, more Pokémon will load once you reach the bottom. You can also search for specific Pokémon using the search bar. Clicking the Pokémon cards will show you more info on the clicked Pokémon. Finally, you can save your favorite Pokémon by clicking the heart icon next to their name in the page with their detailed info. You can do the same to remove Pokémons from your list; your favorites will have a filled heart next to their name, just give a click and they'll be gone from the list. Here's how to do these things:
-
Browsing the PokéFeed
-
Searching for specific Pokémon
-
Adding a Pokémon to your favorite list
-
Removing a Pokémon from your favorite list
The app also has a humble storybook and a couple of tests, you can check them out like so: npm run storybook and npm run test, respectively. Finally, this app has custom linting using eslint (e.g., it checks import organization), you can run check test it out using npm run lint or npm run lint:fix if you want to eslint to implement the suggestions it can straight await. It also uses prettier to enforce a reasonable code style help keep the code clean so even if you don't prettier's plugin I got you covered (just to make sure it's clear, the linting implements prettier corrections too).
Once again, if you're using yarn you should be able to use it, just replace npm with yarn in the previous examples.
- Infinite feed/scroll
- Pokémon search
- Save to favorites/Fav list
- Make app more acessible
- Use more Radix-UI components
- Write more tests for the app
- Write more stories for the app's storybook
See the open issues for a full list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE.txt for more information.
Francisko de Moraes Rezende - @francisko_r - [email protected]
Project Link: https://github.com/francisko-rezende/ioasys-campIV-pokedex