https://github.com/gabrielh-silvestre/pokedex-app

Tool for search about Pokemons, inspired in Official Nintendo Pokedex
https://github.com/gabrielh-silvestre/pokedex-app

react-router reactjs redux redux-toolkit tailwindcss typescript

Last synced: 15 days ago
JSON representation

Tool for search about Pokemons, inspired in Official Nintendo Pokedex

• Host: GitHub
• URL: https://github.com/gabrielh-silvestre/pokedex-app
• Owner: gabrielh-silvestre
• Created: 2021-10-23T21:06:01.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2022-04-27T18:53:53.000Z (over 2 years ago)
• Last Synced: 2023-03-05T11:08:12.086Z (almost 2 years ago)
• Topics: react-router, reactjs, redux, redux-toolkit, tailwindcss, typescript
• Language: TypeScript
• Homepage: https://pokedex-app-sandy.vercel.app
• Size: 1.21 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Pokedex

I started this project to practice and understand how data fetch is done in React.

Today I continue developing it to transform it into a _"real world"_ Pokedex, which I can use as a support tool while I _(or other people)_ play the pokemon games.

## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Screenshot](#screenshot)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

  - [Continued development](#continued-development)

  - [Useful resources](#useful-resources)

- [Author](#author)

## Overview

### The challenge

1. First version of the Pokedex should

- Render Pokemons dynamically

- Search pokemons by name or id

- Adapt mobile and desktop screens

2. Actual and future versions should

- Have pages containing detailed information about pokemons, items, ability, combos, etc _in construction_

- Store user favorite pokemons, captured pokemons and stored pokemons in Local Storage _in construction_

- Have friendly and intuitive interface

- Have light and Dark Mode _in construction_

### Screenshot

![](./src/assets/home_page_desktop.png)

---

![](./src/assets/pokemon_detail_page_desktop.png)

---

![](./src/assets/favorite_page_desktop.png)

### Links

- Live site URL: [https://pokedex-app-sandy.vercel.app](https://pokedex-app-sandy.vercel.app)

## My process

### Built with

- React

- React-hooks

- React-Routers

- Redux (RTK)

- Pokenode-ts

- TypeScript

- Tailwind

- Tailwind-Styled-Components

### What I Learned

I started this project to learn about API consuming on React, using class components, JavaScript and Tailwind for styling. In the beginning I learned about life-cycle methods, state management, prop typing with PropTypes and Tailwind CSS _(was my first contact with the framework)_.

Today I use this project to practice general Front-end tools, like Redux, Styled-Components, custom Hooks, TypeScript, etc.

### Continued development

My goal with this project it's to make it a helpfull tool for Pokemon games, containing info about pokemons, items, berrys, routes and moves.

### Useful resources

This project is a inspiration in the [Official Nintendo Pokedex](https://www.pokemon.com/br/pokedex/)

The documentation for some of the technologies that I used:

- [React](https://pt-br.reactjs.org)

- [Redux Tool Kit](https://redux-toolkit.js.org/introduction/getting-started)

- [React-Routers v5](https://v5.reactrouter.com/web/guides/quick-start)

- [Pokenode-ts](https://pokenode-ts-docs-gabb-c.vercel.app)

- [Tailwind v2.2.16](https://v2.tailwindcss.com/docs)

- [Tailwind Styled-Component](https://www.npmjs.com/package/tailwind-styled-components)

## Author

- Linkedin - [Gabriel Silvestre](https://www.linkedin.com/in/gabrielh-silvestre/)

- DevTo - [Gabriel_Silvestre](https://dev.to/gabrielhsilvestre)