Gestor de Tarjetas de Crédito desarrollado como prueba técnica para Desarrollador Front-End.
Aplicación full-stack con React + Express + MongoDB que permite gestionar tarjetas de crédito de forma segura.
🔗 Repositorio: https://github.com/elizonRL/card-app
- Maquetación moderna y responsive con Tailwind CSS
- Todos los campos requeridos con validación en tiempo real
- Edición en vivo - Los campos modifican la tarjeta instantáneamente
- Campo tarjeta: Solo números, máximo 16 caracteres, formato automático (1234 5678 9012 3456)
- Campo fecha: Formato MM/YY automático
- Validación de fecha: Mes (01-12), Año (22 hasta actual+5)
- Campo nombre: Solo letras y tildes, máximo 20 caracteres
- Mensajes de error en rojo debajo de cada campo inválido
- Botón Agregar: Valida formulario y agrega tarjeta con ID único
- Validación completa antes de agregar
- Enmascaramiento: Muestra solo primeros 2 y últimos 4 dígitos (12** **** **** 5678)
- Botón Cancelar: Limpia todos los campos
- Estados de carga con spinners y feedback visual
- Vista previa interactiva de tarjeta con react-credit-cards-2
- Click para ver CVC con auto-flip en móviles
- Botón eliminar con tooltip y confirmación
- Responsive design optimizado para móviles y desktop
- Skeletons durante carga de datos
- CRUD completo para tarjetas (Create, Read, Update, Delete)
- Express.js como framework web
- MongoDB como base de datos
- Mongoose para modelado de datos
- CORS configurado para desarrollo
- Conexión completa entre formulario y API
- Almacenamiento en MongoDB con persistencia
- Validación de campos requeridos en backend
- Respuestas HTTP correctas: 200, 201, 400, 404, 500
- Manejo de errores robusto
GET /api/v1/cards - Obtener todas las tarjetas
POST /api/v1/cards - Crear nueva tarjeta
PUT /api/v1/cards/:id - Actualizar tarjeta
DELETE /api/v1/cards/:id - Eliminar tarjeta
- Node.js v18+
- npm v8+
- Docker (opcional, para base de datos)
- Git
# 1. Clonar repositorio
git clone https://github.com/elizonRL/card-app.git
cd card-app
# 2. Instalar todas las dependencias
npm run install:all
# 3. Levantar MongoDB con Docker
docker-compose -f docker-compose.dev.yml up -d
# 4. Ejecutar frontend y backend simultáneamente
npm run dev# 1. Clonar repositorio
git clone https://github.com/elizonRL/card-app.git
cd card-app
# 2. Ejecutar con Docker
npm run docker:dev- Frontend: http://localhost:5173
- Backend API: http://localhost:3000
- MongoDB: localhost:27017
-
Agregar Tarjeta:
- Completa todos los campos del formulario
- Observa la vista previa en tiempo real
- Click en "Agregar Tarjeta"
-
Validaciones:
- Deja campos vacíos para ver mensajes de error
- Prueba fechas inválidas (mes > 12, año < 22)
- Ingresa caracteres especiales en nombre
-
Interactividad:
- Click en tarjetas guardadas para ver CVC
- Hover sobre botón eliminar (desktop)
- Prueba en móvil para ver diferencias responsive
# Desarrollo
npm run dev # Frontend + Backend
npm run dev:frontend # Solo Frontend
npm run dev:backend # Solo Backend
# Docker
npm run docker:dev # Todos los servicios
npm run docker:down # Detener servicios
npm run docker:mongo # Solo MongoDB
# Utilidades
npm run install:all # Instalar dependencias- React 18 con Hooks y Context API
- Tailwind CSS para estilos responsive
- Vite como bundler y dev server
- react-credit-cards-2 para vista previa de tarjetas
- Express.js como framework web
- MongoDB con Mongoose ODM
- CORS para comunicación cross-origin
- Arquitectura RESTful con separación de responsabilidades
- Docker y Docker Compose para containerización
- Concurrently para ejecutar múltiples procesos
- Workspaces de npm para monorepo
- UX Mejorada: Animaciones, transiciones y feedback visual
- Responsive Design: Optimizado para móviles y desktop
- Accesibilidad: ARIA labels, roles y navegación por teclado
- Performance: useCallback, cleanup de memoria, estados de carga
- Validaciones Avanzadas: Tiempo real con mensajes específicos
- Docker: Configuración completa para desarrollo y producción
- Código Documentado: JSDoc completo en componentes críticos
- Buenas Prácticas: Separación de responsabilidades, hooks personalizados
- Manejo de Estados: Context API para evitar prop drilling
- Error Handling: Manejo robusto de errores en frontend y backend
- Seguridad: Validaciones tanto en frontend como backend
- Bloque 1: ✅ 100% completado (supera el 70% requerido)
- Bloque 2: ✅ 100% completado (supera el 50% requerido)
- Calidad de Código: Priorizada sobre cantidad de features
- Documentación: Completa con ejemplos de uso
Para contribuir al proyecto:
- Fork el repositorio
- Crea una rama feature (
git checkout -b feature/nueva-funcionalidad) - Commit tus cambios (
git commit -m 'Agregar nueva funcionalidad') - Push a la rama (
git push origin feature/nueva-funcionalidad) - Abre un Pull Request
Este proyecto está bajo la Licencia ISC. Ver el archivo LICENSE para más detalles.
Desarrollado con ❤️ para la prueba técnica de Front-End Developer