Skip to content

Com Tema Dark! Um site que fornece mais de 600 receitas de coquetéis desenvolvido com ReactJS + NodeJS e várias bibliotecas!

License

Notifications You must be signed in to change notification settings

MatheusAndrade23/Go_Drink_React

Repository files navigation

🍹 Go Drink 🍸

FreePick Drinks Image

DemonstraçãoTecnologiasFuncionalidadesDetalhesRodapé

É um site que fornece mais de 600 receitas de coquetéis do mundo todo, utilizando The CocktailDB API. Possui tema dark, todos os textos estáticos estão disponíveis em português e inglês e você ainda pode listar suas bebidas favoritas.

Clique para visitar o site! - Clique para ver a versão em Next! - Clique para ver o Backend!


Demonstração 🎥

Um pequeno tour pelo Projeto! 🚀

GIF Tour pelo projeto

Adicionando aos favoritos! ⭐

GIF Adicionando aos favoritos



Tecnologias Utilizadas 🛠

FrontEnd: ReactJS!

  • React-Router-Dom
  • I18Next
  • Flag Icons
  • React Icons
  • Axios
  • Styled Components
  • Jest Styled Components
  • React Elastic Carousel
  • Context API
  • React Hooks

BackEnd: NodeJS!

  • Express
  • Express-Handlebars
  • JWT
  • Bcrypt
  • Mongoose
  • Nodemon
  • Nodemailer
  • DotEnv
  • Cors

Banco de Dados: MongoDB-Atlas!


npm Js Sass ReactJS Jest NodeJS Express Handlebars MongoDB


Funcionalidades ⚙️

  • ✔️ Responsivo
  • ✔️ Ferramenta de pesquisa
  • ✔️ Mudança de Tema
  • ✔️ Mudança de Língua
  • ✔️ Recuperação de Senha
  • ✔️ Lista de favoritos
  • ✔️ Ver detalhes da Bebida Escolhida
  • ✔️ Listagem de tipos de Copos, Categorias e Ingredientes
  • ✔️ Listagem de bebidas baseada em Categorias, Ingredientes e tipos de Copos


Alguns Detalhes do Funcionamento do Projeto 🔎

Autenticação 👤

A autenticação do usuário é baseada em tokens, utilizando Json Web Token para gerar e verificar a validade de um token através de um middleware no backend. Além disso, existe um provider dedicado à essa funcionalidade no frontend, que contém todos os métodos (Conectar, Registrar e Sair) e armazena o token e os dados do usuário no local storage.

Mudança de Tema 🎨

A aplicação conta com dois temas (claro e escuro), e um botão para a mudança fixo na tela. O tema escuro é renderizado por padrão, mas o tema escolhido pelo usuário fica salvo no local storage sem a necessidade de criar uma conta.

Mudança de Língua 🌎

A biblioteca React I18Next permite a utilização de diferentes línguas no projeto. Como a API The CocktailDB responde em inglês, este idioma se torna praticamente obrigatório. Para o português, não encontrei uma maneira viável de traduzir os textos vindos da API, então essa funcionalidade ainda não está finalizada. A língua escolhida pelo usuário fica salva no local storage e independe de autenticação, assim como o tema.



🌟 Se você gostou, por favor considere dar uma estrela! 🌟