Un sistema completo de autenticación y gestión de eventos construido con JavaScript Vanilla, Vite y arquitectura SPA (Single Page Application).
Clonar o descargar el proyecto
git clone <url-del-repositorio>
cd vanilla-spa-auth
Instalar dependencias
npm install
# o
pnpm install
Ejecutar en modo desarrollo
npm run dev
# o
pnpm dev
Abrir en el navegador
http://localhost:3000npm run build
npm run preview
La aplicación viene con usuarios predefinidos para testing:
| Usuario | Contraseña | Rol | Permisos |
|---|---|---|---|
admin | admin123 | Admin | Gestión completa de usuarios y eventos |
usuario1 | user123 | Usuario | Ver usuarios, gestionar su participación en eventos |
Para Administradores:
Para Usuarios Normales:
Para Administradores:
Para Usuarios Normales:
vanilla-spa-auth/
├── 📄 package.json # Dependencias y scripts
├── ⚙️ vite.config.js # Configuración de Vite
├── 🌐 index.html # Punto de entrada HTML
├── 📊 db.json # Base de datos simulada
└── src/
├── 🚀 main.js # Punto de entrada de la aplicación
├── 🛣️ router.js # Sistema de routing SPA
├── 📁 services/
│ ├── 🔐 auth.js # Servicio de autenticación
│ ├── 💾 database.js # Servicio de base de datos simulada
│ └── 🎉 events.js # Servicio de gestión de eventos
├── 📁 components/
│ ├── 🔑 LoginPage.js # Página de inicio de sesión
│ ├── 📝 RegisterPage.js # Página de registro
│ ├── 📊 DashboardPage.js # Dashboard de usuarios
│ └── 🎪 EventsPage.js # Página de gestión de eventos
└── 📁 styles/
└── 🎨 main.css # Estilos principales
| Funcionalidad | Usuarios | Eventos |
|---|---|---|
| Ver | ✅ Lista completa | ✅ Lista completa |
| Crear | ✅ Nuevos usuarios | ✅ Nuevos eventos |
| Editar | ✅ Cualquier usuario | ✅ Cualquier evento |
| Eliminar | ✅ Cualquier usuario | ✅ Cualquier evento |
| Participar | - | ✅ Unirse/Salirse |
| Funcionalidad | Usuarios | Eventos |
|---|---|---|
| Ver | ✅ Solo lectura | ✅ Lista completa |
| Crear | ❌ | ❌ |
| Editar | ❌ | ❌ |
| Eliminar | ❌ | ❌ |
| Participar | - | ✅ Unirse/Salirse |
El sistema utiliza localStorage para simular una base de datos real con la siguiente estructura:
{
"users": [
{
"id": 1,
"username": "admin",
"email": "admin@example.com",
"password": "admin123",
"role": "admin",
"createdAt": "2024-01-01T00:00:00.000Z"
}
],
"events": [
{
"id": 1,
"name": "Conferencia de Tecnología 2024",
"description": "Una conferencia sobre...",
"capacity": 100,
"currentAttendees": 25,
"attendees": [2, 5, 8],
"createdBy": 1,
"createdAt": "2024-01-01T00:00:00.000Z"
}
]
}
Modifica las variables CSS en src/styles/main.css:
:root {
--primary-color: #007bff; /* Color principal */
--secondary-color: #6c757d; /* Color secundario */
--success-color: #28a745; /* Color de éxito */
--danger-color: #dc3545; /* Color de peligro */
--warning-color: #ffc107; /* Color de advertencia */
}
Modifica los usuarios iniciales en src/services/database.js:
const defaultDb = {
users: [
{
username: "tu_admin",
password: "tu_password",
role: "admin"
}
// Agregar más usuarios...
]
}
Agregar nuevas rutas en src/router.js:
this.routes = {
"/": DashboardPage,
"/nueva-ruta": NuevaPagina,
// Más rutas...
}
Extender la estructura de eventos en src/services/database.js:
const newEvent = {
name: eventData.name,
description: eventData.description,
capacity: eventData.capacity,
// Agregar nuevos campos:
startDate: eventData.startDate,
endDate: eventData.endDate,
category: eventData.category,
location: eventData.location
}
git checkout -b feature/AmazingFeature)git commit -m 'Add some AmazingFeature')git push origin feature/AmazingFeature)Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.
Si tienes preguntas o necesitas ayuda:
⭐ ¡Si te gusta este proyecto, dale una estrella en GitHub! ⭐
Este README proporciona una documentación completa del proyecto, incluyendo:
✅ **Descripción clara** de todas las funcionalidades
✅ **Instrucciones de instalación** paso a paso
✅ **Usuarios de prueba** para testing inmediato
✅ **Explicación de roles** y permisos
✅ **Estructura del proyecto** detallada
✅ **Guías de personalización** para modificaciones
✅ **Consideraciones de seguridad** importantes
✅ **Roadmap** de futuras mejoras
El README está diseñado para que cualquier desarrollador pueda entender rápidamente cómo usar y modificar el sistema. ¡Perfecto para acompañar tu repositorio en GitHub!