Pokedex utilizando PokeApi
Este projeto permite visualizar uma lista de pokemons e ao selecionar um poderá visualizar algumas de suas principais informações
### Pré-requisitos_Initial Commit... Este Projeto foi iniciado a partir de outro projeto em desenvolvimento apenas com as configurações iniciais como "Eslint, Prettier, Typescript com Nextjs"
Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js. Além disto é bom ter um editor para trabalhar com o código como VSCode
As seguintes ferramentas foram usadas na construção do projeto:
# Clone este repositório
$ git clone <https://github.com/Paulo-Martin182/pokedex-app-with-nextjs>
# Acesse a pasta do projeto no terminal/cmd
$ cd pokedex-app-with-nextjs
# Instale as dependências
$ npm install
# Execute a aplicação em modo de desenvolvimento
$ npm run dev
# O servidor inciará na porta:3000 - acesse <http://localhost:3000>
## Você vai precisar de...
- `npm --version` instalado na sua maquina _ Algumas tecnologias para agilizar no desenvolvimento com um padrão funcional...
yarn generate MyComponent
yarn test
Para manter o Jest "Escutando" yarn test:watch
yarn lint
ou
yarn lint --fix
- O Nextjs tem suporte pra SSG, SSR e SPA
Nextjs foi escolhido por suas enormes vantagens e afins de estudos avançados e as vantagens em ter escolhido esta tecnologia apesar de não utilizar todo seu potencial são
- Ótimo em SEO
- Meta Tags com previews mais adequados
- Sua otima Perfomace
- E seu baixo processamento do lado Client
_ Uma desvantagem de utilizar esta opção é o Time to first byte (TTFB), o servidor vai preparar todo o conteudo para entrega, logo... TTFB maior, um HTML maior e um Reload sempre que houver uma requisição
_ um SuperSet do JavaScript, já chamado como linguagem está sendo um queridinho para diversos projetos. O Typescript adiciona novas features ao javascript, sendo tipagens Staticas
Graphql é de fato uma delicinha para trabalhar com API
- permite evolução constante
- Entrega apenas de dados requisitados
- Dados altamente desacoplados
_ Pelo fato de entregar apenas dados requisitados o deixa menor e mais rapido...
Css outra delicinha haha
_ o Styled Components tem Escopo Definido, isso evita colisões de classes <3
- Remove css não utilizado
- Props e Themes, pode ser altamente dinamico
- E uma manutenção simplificada, com uma vantagem ao utilizar Jest
_ E um ponto que sempre me perco... o Styled possui Vendor Prefixing automatico e isso salva bastante para não precisar ficar colocando aquelas coisas como "webkit ou moz"
Jest foi utilizado para verificar se...
_ quando o leitor de tela passar, os componentes principais, vão estar todos exibindo corretamente o "Alt"
Plop foi muito util durante o desenvolvimento, pois está é uma tecnologia que pode gerar arquivos a partir de um template base, então eu criei uma pasta como base de componente, com os "stories.tsx", "testes.tsx", "Styles.ts" e o "index.tsx" com um codigo padrão
Eslint serve para formatação de codigo e correção de Inconsistências com base a uma coleção de regras como
- Caso Utilizar Hooks de formas erradas
- Criação de variaveis não utilizadas