Plataforma web que permite a los usuarios ver videos y ganar puntos mediante verificación facial en tiempo real. Los usuarios deben mantener su rostro visible durante al menos el 90% del video para acumular puntos que pueden canjear por recompensas.
- ✅ Registro y Login con Verificación Facial: Autenticación biométrica usando face-api.js
- 🎥 Reproducción de Videos con Detección en Tiempo Real: Valida que el usuario esté viendo el video
- 🏆 Sistema de Puntos y Recompensas: Gana puntos al completar videos y canjéalos por premios
- 🔒 Seguridad: Autenticación JWT, hashing de contraseñas, almacenamiento de descriptores faciales
- 📊 Tracking Preciso: Calcula el porcentaje exacto de tiempo visto con rostro visible
- Node.js + Express + TypeScript
- MongoDB con Mongoose
- JWT para autenticación
- bcryptjs para hashing de contraseñas
- React + TypeScript + Vite
- Tailwind CSS v4 para estilos
- face-api.js para detección facial
- react-webcam para acceso a cámara
- axios para peticiones HTTP
- react-hot-toast para notificaciones
- canvas-confetti para celebraciones
- Node.js >= 18.x
- npm >= 9.x
- MongoDB >= 6.x (local o Atlas)
- Navegador moderno con soporte para WebRTC (Chrome, Firefox, Edge)
- Cámara web funcional
git clone https://github.com/joseberna/poc-faceidcd backend
# Instalar dependencias
npm install
# Configurar variables de entorno
cp .env.example .env
# Editar .env con tus credenciales de MongoDB
# Poblar base de datos
npm run seed
# Iniciar servidor de desarrollo
npm run devEl backend estará corriendo en http://localhost:3000
cd ../frontend
# Instalar dependencias
npm install
# Descargar modelos de IA
chmod +x download-models.sh
./download-models.sh
# Configurar variables de entorno
cp .env.example .env
# Iniciar servidor de desarrollo
npm run devEl frontend estará corriendo en http://localhost:5173
- Abre
http://localhost:5173en tu navegador - Haz clic en "Register" para crear una cuenta
- Permite el acceso a la cámara cuando se solicite
- Captura tu rostro para el registro
- Inicia sesión con verificación facial
- ¡Empieza a ver videos y ganar puntos!
src/
├── backend/ # Servidor Node.js + Express
│ ├── src/
│ │ ├── config/ # Configuración (DB, etc.)
│ │ ├── controllers/ # Lógica de negocio
│ │ ├── models/ # Modelos de Mongoose
│ │ ├── routes/ # Rutas de API
│ │ ├── middleware/ # Middleware (auth, etc.)
│ │ ├── utils/ # Utilidades (Logger)
│ │ ├── app.ts # Configuración de Express
│ │ ├── server.ts # Punto de entrada
│ │ └── seed.ts # Script de población de DB
│ ├── .env # Variables de entorno
│ └── package.json
│
└── frontend/ # Aplicación React
├── public/
│ ├── models/ # Modelos de face-api.js
│ └── videos/ # Videos locales
├── src/
│ ├── pages/ # Páginas (Login, Register, Dashboard, etc.)
│ ├── services/ # Servicios (faceService, etc.)
│ ├── utils/ # Utilidades (Logger)
│ ├── App.tsx # Componente principal
│ └── main.tsx # Punto de entrada
├── .env # Variables de entorno
└── package.json
PORT=3000
NODE_ENV=development
MONGODB_URI=mongodb://localhost:27017/mimejorversion
JWT_SECRET=your-super-secret-jwt-key-change-this-in-productionVITE_API_URL=http://localhost:3000cd backend
npm run build
npm startcd frontend
npm run build
# Los archivos estarán en dist/- Haz clic en "Register"
- Completa el formulario (nombre, email, contraseña)
- Permite acceso a la cámara
- Captura tu rostro cuando esté centrado
- El sistema guardará tu descriptor facial
- Ingresa tu email
- Permite acceso a la cámara
- El sistema verificará que tu rostro coincida con el registrado
- Accederás al dashboard
- En el dashboard, selecciona un video
- Haz clic en Play
- Mantén tu rostro visible durante el video
- Si el sistema no detecta tu rostro, el video se pausará
- Al completar el 90% del video con tu rostro visible, ganarás puntos
- Ve a la sección "Rewards"
- Selecciona una recompensa
- Si tienes suficientes puntos, podrás canjearla
- Asegúrate de permitir el acceso a la cámara en tu navegador
- Verifica que ninguna otra aplicación esté usando la cámara
- Usa HTTPS o localhost (WebRTC requiere conexión segura)
- Asegúrate de tener buena iluminación
- Mantén tu rostro centrado en la cámara
- Quítate gafas oscuras o máscaras
- Mantén una distancia de 60-80cm de la pantalla
- Ejecuta
./download-models.shen la carpeta frontend - Verifica que los archivos estén en
public/models/ - Recarga la página
- Verifica que el backend esté corriendo en el puerto 3000
- Verifica que MongoDB esté corriendo
- Revisa las variables de entorno
npm run dev- Inicia servidor en modo desarrollonpm run build- Compila TypeScript a JavaScriptnpm start- Inicia servidor en producciónnpm run seed- Pobla la base de datos
npm run dev- Inicia servidor de desarrollonpm run build- Genera build de producciónnpm run preview- Preview del build de producción
- Las contraseñas se hashean con bcrypt (10 rounds)
- Los tokens JWT expiran en 7 días
- Solo se almacenan descriptores faciales (no imágenes)
- Validación de identidad en login y durante reproducción
- CORS configurado para dominios específicos
- Fork el proyecto
- Crea una rama para tu feature (
git checkout -b feature/AmazingFeature) - Commit tus cambios (
git commit -m 'Add some AmazingFeature') - Push a la rama (
git push origin feature/AmazingFeature) - Abre un Pull Request
Este proyecto es privado y confidencial.
- Live Demo: https://poc-faceid.vercel.app/login
- Jose Berna - Desarrollo inicial
- face-api.js por la detección facial
- TinyFaceDetector por el modelo ligero