https://github.com/matheusandrade23/go_drink_react

Com Tema Dark! Um site que fornece mais de 600 receitas de coquetéis desenvolvido com ReactJS + NodeJS e várias bibliotecas!
https://github.com/matheusandrade23/go_drink_react

axios bcrypt context-api eslint express i18next jest jwt node nodemailer prettier react react-carousel react-flags react-hooks react-icon react-icons react-router-dom styled-components theme-switcher

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/matheusandrade23/go_drink_react
• Owner: MatheusAndrade23
• License: mit
• Created: 2022-04-26T20:43:14.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2022-08-14T23:44:52.000Z (over 2 years ago)
• Last Synced: 2024-04-18T09:43:14.114Z (10 months ago)
• Topics: axios, bcrypt, context-api, eslint, express, i18next, jest, jwt, node, nodemailer, prettier, react, react-carousel, react-flags, react-hooks, react-icon, react-icons, react-router-dom, styled-components, theme-switcher
• Language: JavaScript
• Homepage: https://go-drink-react.vercel.app
• Size: 24.3 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
🍹 Go Drink 🍸




 





 Demonstração •

 Tecnologias •

  Funcionalidades •

 Detalhes •

 Rodapé



É 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! 🚀
_




_
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!`






  

  

  

  

  

  

  

  

  

 


 


---

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! 🌟