Início Profile Projeto
Avatar de

Lucas Maciel

💳 GenCard

  • sass
  • regex
  • imask
  • sweetalert
  • nodejs
  • npm
  • css-buttons
  • dom-to-image
  • vitejs
  • vanilla-tilt
  • ui-ball-loaders
  • javascript
  • css
  • html
🇺🇸 English
🇧🇷 Português

luk4x-repo-status luk4x-repo-license

💳 GenCard Project


Vídeo   |    Tecnologias   |    Sobre   |    Destaques   |    Clone   |    Contato


📹 Apresentação em Vídeo do Projeto

Caso o vídeo apresente algum erro, recarregue a página!
Acesse o projeto online AQUI

🚀 Tecnologias Utilizadas

📝 Sobre

Assistir o vídeo acima e/ou acessar o projeto online ajudará na compreensão da explicação!

Inspirado no RocketPay, o GenCard simula um formulário de preenchimento de cartão de crédito, onde o foco foi praticar a manipulação de elementos HTML via DOM e utilizar o IMask para a validação das informações.
Visto que já tinha esses conhecimentos, aproveitei a oportunidade para dar margem às minhas ideias e explorar mais sobre Regex e Sass, assim desenvolvendo diversas modificações e melhorias, como a criação de validações extras, o desenvolvimento de um CSS mais rebuscado e performático, entre outras citadas na sessão de destaques.

📌 Alguns Destaques

  • Validações extras;
  • Mais possibilidades de cartões;
  • Layout, experiência do usuário e animações melhoradas com o uso de Sass, da lib Vanilla-Tilt, e componentes de Loaders e Buttons.;
  • Opção de gerar e baixar a imagem do cartão utilizando o Dom-To-Image - funcionalidade essa que pode não ter muito sentido nesse contexto, mas mesmo assim quis pôr em prática essa ideia que me veio a mente;
  • Modal de feedback para o usuário com informações do mesmo utilizando o SweetAlert;
  • Projeto totalmente responsivo;

📖 Clonando o Projeto

Para clonar e executar este projeto em seu computador, você precisará do Git e Node.js v16.13.2 ou superior previamente instalados.
Feito isso, no terminal:

# Clone esse repositório com:
> git clone https://github.com/Luk4x/gencard.git

# Entre no repositório com:
> cd gencard

# Instale as dependências com:
> npm install

# Execute o projeto com:
> npm run dev

# Feito isso, você já poderá acessar o projeto pelo link que aparecerá no terminal! (algo como http://localhost:3000/ ou http://127.0.0.1:5173/)

🤝 Contato dos Contribuintes

Vitrine.Dev 🪟
Luk4x Github Photo
Lucas Maciel
🪧 Vitrine.Dev Lucas Maciel
Nome 💳 GenCard
🏷️ Tecnologias sass, regex, imask, sweetalert, nodejs, npm, css-buttons, dom-to-image, vitejs, vanilla-tilt, ui-ball-loaders, javascript, css, html
📷 Img
MaykBrito.Dev 🪟
Luk4x Github Photo
Mayk Brito

Voltar ao Topo

Veja meu projeto em: https://github.com/Luk4x/gencard