¡Bienvenido a EtudeJS! 🌟 Una plataforma revolucionaria de aprendizaje musical donde la tecnología se encuentra con la pasión por la música.
EtudeJS es una aplicación web moderna y elegante diseñada para transformar la forma en que aprendes música. Con un piano virtual interactivo, sistema de cursos personalizados y un seguimiento detallado de tu progreso, ¡convertirse en músico nunca había sido tan emocionante! 🎼
- 🎹 Piano Virtual de Dos Octavas: Toca directamente en tu navegador con sonidos de alta calidad
- 🔐 Sistema de Autenticación Seguro: JWT con cookies HttpOnly para máxima seguridad
- 📊 Dashboard Personalizado: Seguimiento detallado de tu progreso musical
- 🎓 Sistema de Cursos: Aprende a tu ritmo con contenido estructurado
- 🏆 Sistema de Logros: Celebra cada hito en tu journey musical
- 📱 Diseño Responsivo: Perfecto en desktop, tablet y móvil
- 🌙 Interfaz Elegante: Dark theme con gradientes dorados y animaciones suaves
- Next.js 15.3.5 - Framework React con App Router
- React 19.1.0 - Biblioteca de interfaces de usuario
- TypeScript - Tipado estático para mayor robustez
- Tailwind CSS v4 - Estilos utilitarios modernos
- Framer Motion - Animaciones fluidas y elegantes
- Next.js API Routes - Endpoints serverless
- Prisma ORM - Gestión de base de datos moderna
- PostgreSQL - Base de datos relacional robusta
- JWT - Autenticación segura con tokens
- bcrypt - Encriptación de contraseñas
- SSR/CSR Híbrido - Mejor rendimiento y SEO
- TypeScript Strict Mode - Máxima seguridad de tipos
- Responsive Design - Mobile-first approach
- Audio System - Reproducción de sonidos MP3 optimizada
- Landing page atractiva con animaciones
- Detección automática de estado de autenticación
- Redirección inteligente según el usuario
- Dos octavas completas (C4-B5)
- Controles de teclado:
- Teclas blancas:
A S D F G H J K L Ñ Q W E R T Y U I O P - Teclas negras:
W E T Y U O P
- Teclas blancas:
- Sonidos realistas con archivos MP3 de alta calidad
- Feedback visual al tocar las teclas
- Registro seguro con validación de datos
- Login con JWT y cookies HttpOnly
- Perfil personalizado con estadísticas detalladas
- Logout seguro con limpieza de cookies
- Vista general de progreso
- Estadísticas visuales con gráficos interactivos
- Sistema de inscripciones a cursos
- Tracking de progreso en tiempo real
- Node.js 18+
- PostgreSQL 13+
- npm o yarn
-
Clona el repositorio
git clone https://github.com/aiizedev/EtudeJs.git cd EtudeJs -
Instala las dependencias
npm install # o yarn install -
Configura las variables de entorno
cp .env.example .env
Edita
.envcon tus configuraciones:DATABASE_URL="postgresql://username:password@localhost:5432/etudejs" JWT_SECRET="tu-clave-secreta-super-segura" NEXTAUTH_SECRET="otra-clave-secreta-para-nextauth"
-
Configura la base de datos
npx prisma generate npx prisma db push
-
Inicia el servidor de desarrollo
npm run dev # o yarn dev -
¡Abre tu navegador en
http://localhost:3000! 🎉
EtudeJS/
├── 📁 app/ # App Router de Next.js
│ ├── 📁 (root)/ # Rutas principales
│ │ ├── 📄 page.tsx # Landing page
│ │ ├── 📁 dashboard/ # Dashboard principal
│ │ ├── 📁 piano/ # Piano virtual
│ │ └── 📁 profile/ # Perfil de usuario
│ ├── 📁 api/ # API Routes
│ │ └── 📁 auth/ # Endpoints de autenticación
│ ├── 📁 hooks/ # Custom React hooks
│ └── 📄 layout.tsx # Layout principal
├── 📁 components/ # Componentes reutilizables
│ └── 📁 ui/ # Componentes de UI
├── 📁 lib/ # Utilidades y configuraciones
├── 📁 prisma/ # Esquemas de base de datos
├── 📁 public/ # Archivos estáticos
│ ├── 📁 audios/ # Sonidos del piano
│ ├── 📁 icons/ # Iconos SVG
│ └── 📁 images/ # Imágenes
└── 📁 styles/ # Estilos globales
- Regístrate en la plataforma
- Explora el piano virtual y familiarízate con los controles
- Inscríbete en cursos desde el dashboard
- Practica regularmente y sigue tu progreso
- Desbloquea logros mientras avanzas
- Fork el repositorio y crea tu rama
- Instala las dependencias siguiendo la guía
- Ejecuta los tests (cuando estén disponibles)
- Haz tus cambios siguiendo las convenciones
- Crea un Pull Request con descripción detallada
¡Las contribuciones son bienvenidas! 🎉 Si tienes ideas, mejoras o encuentras bugs:
- 🍴 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
- 🐛 Corrección de bugs
- ✨ Nuevas características
- 📚 Mejoras en documentación
- 🎨 Mejoras de UI/UX
- 🔊 Nuevos sonidos para el piano
- 🧪 Tests unitarios e integración
npm run dev # 🚀 Servidor de desarrollo con Turbopack
npm run dev-stable # 🚀 Servidor de desarrollo estable
npm run build # 🏗️ Build de producción
npm run start # ▶️ Servidor de producción
npm run lint # 🔍 Linter de código
npm run clean # 🧹 Limpia archivos de build- 🎤 Integración con micrófono para detección de pitch
- 🎼 Editor de partituras integrado
- 🤖 IA para recomendaciones personalizadas
- 🎮 Gamificación avanzada con challenges diarios
- 📱 App móvil nativa
- 🌐 Soporte multiidioma
- 👥 Funciones sociales y colaborativas
- 🎥 Lecciones en video integradas
- El piano virtual funciona mejor en navegadores modernos
- Los sonidos requieren interacción del usuario para reproducirse (política del navegador)
- La primera carga puede ser lenta debido a la precarga de audios
Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.
aiizedev - Desarrollador Principal
- GitHub: @aiizedev
- 🎵 Samples de audio de YO, gracias
¡Hecho con ❤️ y mucha ☕ por el equipo de EtudeJS!
¿Te gusta el proyecto? ¡No olvides darle una ⭐ en GitHub!