felipenmatos / challenge-by-coodesh

🔎 english word lookup system

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

SOBRE O PROJETO

project1

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

Prototipo

#Tela de Login Login LoginMobile

#Tela de Cadastro Cadastro RegisterMobile

#Tela de Conclusão de Cadastro Cadastro_Concluido CadastroConcluidoMobile

#Tela Home Home FavoritesMobile

#Adicionando Itens ao Favoritos AddFavorite

#Listagem de Favoritos HomeFavorite FavoritesMobile

#Estrutura de Arquivos

EstruturaPastas

#Teste Storybook Teste-Storybook

npm start

npm run storybook para teste.

About

🔎 english word lookup system


Languages

Language:JavaScript 89.2%Language:TypeScript 8.3%Language:HTML 2.3%Language:CSS 0.2%