🇺🇸 English

🇧🇷 Português

💳 GenCard Project

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

📹 Apresentação em Vídeo do Projeto

gencard-video.mp4

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

🚀 Tecnologias Utilizadas

• SweetAlert
• Vanilla-Tilt
• Dom-To-Image
• Sass
• iMask
• UI Ball Loaders
• CSS Buttons
• Regex
• ViteJS
• NodeJS
• npm
• Javascript
• CSS
• HTML

📝 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 🪟 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 🪟 Mayk Brito

Voltar ao Topo