iago1501 / Pokeshop

PokéShop (E-commerce using Poke API)

PokéShop

Onde se pode comprar pokemons de vários tipos! (Me preocupei em ser o mais Pokémon friendly possível)

Pokémon, Shop, E-commerce, React, Typescript, PokeAPI

O Projeto foi feito com Typescript, Redux (utilizando do Ducks Pattern), Context API;

[]

POKESHOP HOME

Acesso

• O site pode ser acessado através do link: https://iago1501.github.io/Pokeshop/

Instalação

• Para rodar o código em sua máquina é necessário ter yarn instalado:

Clone

• Clone o repositório através da URL: https://github.com/iago1501/pokeshop.git

Setup

• Após o repositório estar instalado na máquina:

Instale e rode o código com os comandos abaixo:

$ yarn
$ yarn start

Algumas configurações também foram feitas utilizando storybook, para rodar é necessário:

$ yarn storybook

Tecnologias Utilizadas

• React;
• Typescript;
• Redux (Gerenciar Estados);
• Context API;
• Storybook;
• Styled Components;
• Material UI;
• React Helmet;
• Redux Persist;
• GH Pages;
• Lazy Load (InfiniteScroll);
• Ducks;
• Stripe (Pagamentos);
• Axios;
• Media Queries;
• Grids e Flexboxs;

Desenvolvedor

Iago Espinoza
github.com/iago1501

---

FAQ

• Como foi o projeto?

  • Já havia feito ele faz um tempo, após 2 anos resolvi pegar e fazer algumas muitas mudanças. Refatorar código e pensar sobre alterações de uma época que você precisou fazer ele rápido só que agora com mais calma é sempre bom. Migração pra typescript e uma nova estrutura de pastas foi necessário.

• Pretende fazer modificações futuras?

  • Sim, pretendo usar esse projeto como forma de estudar coisas novas que vou aprendendo e ter um lugar pra implementar elas é sempre bom. Para dar o ecommerce como "completo" ainda faltam muitas coisas, como:
    • Fazer algumas configurações a mais para versão mobile;
    • Acrescentar testes E2E e testes unitários;
    • Acrescentar melhorias de UX e UI para o usuário;
    • Local Storage para starred;
    • Evoluções de Pokemon em details;
    • Autenticação de usuário;
    • Ajustes e estudos de SEO/Acessibilidade/HTML semântica
    • etc...