O RocketPay é uma aplicação web interativa que simula um formulário de cartão de crédito com funcionalidades avançadas de UI/UX. O projeto foi desenvolvido durante o Explorer Lab #01 da Rocketseat, focando em:
- 🎭 Máscaras dinâmicas nos campos de entrada
- 🎨 Interface responsiva e moderna
- 🔄 Atualização em tempo real dos dados do cartão
- 🏦 Detecção automática da bandeira do cartão
- ✨ Animações suaves e feedback visual
- ✅ Validação em tempo real dos dados do cartão
- ✅ Máscara automática para número do cartão, data de expiração e CVC
- ✅ Detecção da bandeira do cartão (Visa, Mastercard, etc.)
- ✅ Preview visual do cartão com dados inseridos
- ✅ Interface responsiva para dispositivos móveis
- ✅ Animações CSS suaves
- Vite - Build tool e dev server ultrarrápido
- iMask - Biblioteca para máscaras de input
- Inter Font - Tipografia moderna do Google Fonts
Antes de começar, você vai precisar ter instalado em sua máquina:
# Clone este repositório
git clone https://github.com/marquesmaycon/rocketpay.git
# Acesse a pasta do projeto
cd rocketpay
# Instale as dependências
npm install
# Execute a aplicação em modo de desenvolvimento
npm run dev
# O servidor iniciará na porta:5173
# Acesse http://localhost:5173rocketpay/
├── 📁 public/ # Arquivos estáticos
│ ├── 🖼️ *.svg # Ícones do projeto
│ └── 🎨 cc-*.svg # Ícones dos cartões
├── 📁 src/ # Código fonte
│ ├── 📁 css/ # Arquivos de estilo
│ │ ├── base.css # Estilos base
│ │ ├── credit-card.css
│ │ ├── form.css
│ │ └── index.css
│ └── � main.js # Lógica principal
├── 📄 index.html # Página principal
├── 📄 package.json # Dependências do projeto
└── 📖 README.md # Este arquivo
O layout do projeto foi baseado no design disponível no Figma:
