O projeto Dictionary foi feito com Next.js. Ele é um dicionário que lista diversas palavras em inglês e faz uma busca na API do freeDictionaryAPI para retornar o dialeto, audio e outras infos bem legais.
Nele você pode ouvir audio da palavra, salvar uma como favorita, ver o histórico de ultimas palavras vistas. E ele é 100% responsivo.
🚀 Technologies
O projeto foi desenvolvido utilizando as tecnologias abaixo:
- Next.js
- Typescript
- Styled Components
- Axios
- react H5 Audio Player
- Json Server
- Memory Cache
- Bootstrap
- React Toastify
- Use Local Storage State
🌐 Acesso o projeto clicando aqui.
🚧 Como testar:
Clone a aplicação utilizando o Git, [Node.js][https://nodejs.org] + [Yarn][https://yarnpkg.com]. Tenha o node e o yarn nas versões mais recentes. Eu usei o Node na V16.15.1.
Rode os seguintes comandos abaixo:
# Clone this repository
$ git clone https://github.com/JulioCesar012/dictionary_web.git
# Go into the repository
$ cd dictionary_web
# Install dependencies
$ yarn
# Rodar em desenvolvimento
$ yarn dev
# Rodar em modo produção
$ yarn build
$ yarn start
# running on port 3000Para você poder testar o projeto sem impedimentos ou problemas de conexão eu subi uma api com todas palavras e objetos que a aplicação precisa, não é uma api complexa, mas ela já está hospedada na Vercel, é só adicionar no .env ou .env.local esse váriavel API_JSON_SERVER e adicionar a url abaixo e já irá funcionar.
API_JSON_SERVER=https://dictionaryapi.vercel.app
Esse é um desafio da Coodesh #challenge by coodesh
Caso você não queira usar a api que deixei hospedada na Vercel, poderá baixar o projeto dela aqui no meu git, nesse link. Após baixar só entrar na pasta dictionary_api e rodar o yarn, feito isso, rode o yarn dev em ambos projetos e no dictionary_web deixe a váriavel API_JSON_SERVER vazia. E teste a aplicação.
📞 Qualquer dúvida estou a disposição.
eu implementei recurso de salvar histórico e favoritos no localstorage então as apis de salvar histórico e favoritos que estavam sendo usadas agora estão desativadas e usando o storage.
Made with ♥ by JulioCesar012 👋 Get in touch!