SOBRE O PROJETO

O projeto Challenge consiste em um sistema de listagem de palavras em Inglês, onde é possível visualizar diversas palavras e ao clicar, verificar o significado e o áudio de pronúncia, além disso o sistema te dar a possibilidade de salvar em favoritos as palavras que você achou interessante, manipulando sua lista de favoritos. Para inicializar o sistema e consultar as palavras, será necessário efetuar o cadastro e o Login.

O DESENVOLVIMENTO

A aplicação foi desenvolvida em React + Typescript, sendo utilizado algumas libs, testes e implementação de um banco de dados na nuvem para ser necessário listar uma gama de palavras. Utilizei o Storybook para testar os componentes de forma unitária antes de implementa-las nas respectivas páginas e elementos. O firebase foi a principal fonte de desenvolvimento do banco de dados para armazenar a lista de palavras do dicionário, sendo configurado e inicializado no projeto seguindo a sua documentação básica. Para importar as palavras no firebase, foi necessário transformar a lista de texto em uma array e transformar em json para a sua importação. A consulta das rotas da API foi implementada utilizando o Axios, passando as validações. Para essas validações, foi criado um Context para manipular algumas informações necessárias, além de utilizar o Hooks para dinamismo da aplicação do lado do cliente. A rota da Home foi privada para a verificação de autenticação feita pelo LocalStorage.
A estilização dos componentes e páginas, foi desenvolvida em styled-components para diminuir a quantidade de arquivos css que seriam gerados, passando a regra de desenvolvimento do css na sua devida página de utilização. Para a visualização e audição da pronúncia foi implementada um componente externo que foi instalada, sendo possível dar play, mudar a velocidade e voltar o áudio.

###O projeto está configurado em PWA para melhor mobilidade em android.

O Protótipo

O protótipo do projeto foi desenvolvido com Figma utilizando a base em cima das pesquisas para chegar ao desejável final, um sistema de forma acessível e fácil de manipular.

API utilizada no projeto : (Dictionary Api)[https://dictionaryapi.dev/];

Libs utilizada no projeto :

Pacote NPM; React-router-dom ; Storybook; Styled-components; Axios; React-audio-player;

#Protótipo

#Tela de Login

#Tela de Cadastro

#Tela de Conclusão de Cadastro

#Tela Home

#Adicionando Itens ao Favoritos

#Listagem de Favoritos

#Estrutura de Arquivos

#Teste Storybook

npm start

npm run storybook para teste.