"Lo que es importante rara vez es urgente y lo que es urgente rara vez es importante."

Prioreisen es una aplicación de gestión de tareas basada en la Matriz de Eisenhower, diseñada para ayudarte a priorizar inteligentemente tus actividades diarias diferenciando lo importante de lo urgente.

• ⚙️ Framework: Laravel 11
• 🗄️ Base de datos: MySQL / SQLite
• 🔐 API: RESTful con CORS configurado

• 🌐 Framework: Vue 3 + Vite
• 🎨 Estilos: Tailwind CSS
• ✨ Animaciones: @vueuse/motion
• 🔔 Notificaciones: Vue Toastification
• 🎭 Modales: SweetAlert2
• 🎯 Drag & Drop: Vuedraggable

• Gradientes vibrantes en cuadrantes (azul, verde, amarillo, gris)
• Glassmorphism en header y cards
• Efectos de hover fluidos y profesionales
• Iconos SVG personalizados en toda la interfaz
• Scrollbar personalizada con colores del tema
• Fondo con gradiente sutil (gris → azul → índigo)

• Entrada animada de todos los componentes
• Transiciones suaves al mover tareas
• Efectos de escala en botones y cards
• Indicadores visuales al arrastrar elementos
• Micro-interacciones en toda la aplicación

• Toast notifications elegantes y discretas
• Feedback inmediato para todas las acciones
• Estados visuales: éxito, error, info, advertencia
• Posicionamiento inteligente (esquina superior derecha)
• Auto-dismiss configurable

• Crear, editar y eliminar tareas fácilmente
• Drag & drop entre cuadrantes para re-priorizar
• Marcar como completadas con un clic
• Recuperar tareas de la sección terminadas
• Visualización clara del estado de cada tarea
• Descripción expandible para textos largos

• Modelos principales:

  • User (opcional, si se activa la autenticación)
  • Task
    • title (string) - Título de la tarea
    • description (text) - Descripción detallada
    • important (boolean) - Marca si es importante
    • urgent (boolean) - Marca si es urgente
    • due_date (nullable, date) - Fecha de finalización
    • status (enum: pending, in_progress, completed)
    • El cuadrante se determina automáticamente combinando important y urgent

• API RESTful:

  • GET /api/tasks – Listar todas las tareas
  • POST /api/tasks – Crear nueva tarea
  • PATCH /api/tasks/{id} – Actualizar tarea
  • DELETE /api/tasks/{id} – Eliminar tarea

• CORS: Configurado para permitir desarrollo local y producción

• Componentes principales:

  • App.vue - Componente raíz con layout principal
  • AppHeader.vue - Cabecera con logo y frase motivacional
  • MainComponent.vue - Matriz de Eisenhower y lógica principal
  • TaskCard.vue - Card individual para cada tarea

• Características técnicas:

  • Composición API (Vue 3 script setup)
  • Reactive state con ref() y computed()
  • Lifecycle hooks para carga de datos
  • Event emitters para comunicación entre componentes
  • Optimistic UI updates para mejor UX

• Organización de Cuadrantes:

  1. 🟦 Hacer Ya (Importante + Urgente) - Crisis y emergencias
  2. 🟩 Planificar (Importante + No Urgente) - Planificación y desarrollo
  3. 🟨 Delegar (No Importante + Urgente) - Interrupciones y distracciones
  4. ⬜ Eliminar (No Importante + No Urgente) - Pérdidas de tiempo

• Node.js 18+ y npm
• PHP 8.1+
• Composer
• MySQL / SQLite

# Clonar el repositorio
git clone https://github.com/colidom/prioreisen.git
cd prioreisen/backend

# Instalar dependencias
composer install

# Configurar entorno
cp .env.example .env
php artisan key:generate

# Configurar base de datos en .env
# DB_CONNECTION=mysql (o sqlite)
# DB_DATABASE=prioreisen
# DB_USERNAME=tu_usuario
# DB_PASSWORD=tu_contraseña

# Migrar base de datos
php artisan migrate

# Limpiar caché de configuración
php artisan config:clear

# Iniciar servidor
php artisan serve
# El backend estará disponible en http://localhost:8000

cd prioreisen/frontend

# Instalar dependencias
npm install

# Configurar URL del backend
# Edita src/config.js y asegúrate de que apunte a tu backend:
# export const API_URL = "http://localhost:8000/api"

# Iniciar servidor de desarrollo
npm run dev
# El frontend estará disponible en http://localhost:5173

# Desde la raíz del proyecto
docker-compose up -d

# El backend estará en http://localhost:8000
# El frontend estará en http://localhost:5173

• ✅ Crear tareas - Modal intuitivo con validación
• ✏️ Editar tareas - Modificar título y descripción
• 🎯 Mover entre cuadrantes - Drag & drop fluido con feedback visual
• ✔️ Completar tareas - Marca como terminada con notificación
• 🔄 Recuperar tareas - Restaura tareas completadas a cualquier cuadrante
• 🗑️ Eliminar tareas - Con confirmación para evitar errores

• 💫 Animaciones fluidas - Entrada, salida y transiciones
• 🔔 Notificaciones toast - Feedback inmediato de acciones
• 📱 Diseño responsive - Optimizado para móvil, tablet y escritorio
• 🎨 Tema moderno - Gradientes y efectos glassmorphism
• ⚡ Carga optimista - Actualización instantánea de UI
• 🎯 Estados visuales - Indicadores claros de drag, hover, etc.

• ⚡ Hot Module Replacement (HMR) con Vite
• 🎯 TypeScript ready (configuración preparada)
• 📦 Bundle optimizado para producción
• 🔐 CORS configurado para desarrollo y producción
• 💾 Persistencia de datos vía API REST
• 🔄 Sincronización en tiempo real con el backend

"Lo que es importante rara vez es urgente y lo que es urgente rara vez es importante." — Dwight D. Eisenhower

La Matriz de Eisenhower es una herramienta de gestión del tiempo que te ayuda a decidir sobre y priorizar tareas por urgencia e importancia:

Importante y Urgente

• Crisis, emergencias, deadlines inminentes
• Acción: Hacer inmediatamente
• Ejemplo: Bug crítico en producción, presentación de mañana

Importante pero No Urgente

• Planificación, desarrollo personal, relaciones
• Acción: Programar y hacer con calma
• Ejemplo: Aprender nueva tecnología, hacer ejercicio, planificar proyecto

No Importante pero Urgente

• Interrupciones, algunas llamadas, algunos correos
• Acción: Delegar a otros si es posible
• Ejemplo: Reuniones poco productivas, solicitudes de otros

Ni Importante ni Urgente

• Distracciones, pérdidas de tiempo, trivialidades
• Acción: Eliminar o minimizar
• Ejemplo: Scroll infinito en redes, TV sin propósito

GET /api/tasks

Respuesta:

[
    {
        "id": 1,
        "title": "Preparar presentación",
        "description": "Slides para el cliente XYZ",
        "important": true,
        "urgent": true,
        "status": "pending",
        "due_date": null,
        "created_at": "2025-01-15T10:00:00.000000Z",
        "updated_at": "2025-01-15T10:00:00.000000Z"
    }
]

POST /api/tasks
Content-Type: application/json

{
  "title": "Nueva tarea",
  "description": "Descripción detallada",
  "important": true,
  "urgent": false,
  "status": "pending"
}

PATCH /api/tasks/{id}
Content-Type: application/json

{
  "title": "Título actualizado",
  "description": "Nueva descripción",
  "important": false,
  "urgent": true
}

DELETE /api/tasks/{id}

• Hacer Ya: #3B82F6 → #2563EB (Azul)
• Planificar: #10B981 → #059669 (Verde)
• Delegar: #F59E0B → #D97706 (Amarillo)
• Eliminar: #6B7280 → #4B5563 (Gris)

• Primario: #4F46E5 (Índigo)
• Secundario: #7C3AED (Púrpura)
• Éxito: #10B981 (Verde)
• Error: #EF4444 (Rojo)
• Advertencia: #F59E0B (Amarillo)
• Info: #3B82F6 (Azul)

• sm: 640px (Móviles grandes y tablets pequeñas)
• md: 768px (Tablets)
• lg: 1024px (Laptops)
• xl: 1280px (Escritorio)
• 2xl: 1536px (Pantallas grandes)

• Grid adaptativo para matriz de cuadrantes
• Header colapsable en móviles
• Botones y cards con tamaños apropiados
• Tipografía escalable
• Imágenes responsive

npm run dev      # Servidor de desarrollo con HMR
npm run build    # Build para producción
npm run preview  # Preview del build de producción
npm run lint     # Linter con ESLint
npm run format   # Formatear código con Prettier

php artisan serve          # Servidor de desarrollo
php artisan migrate        # Ejecutar migraciones
php artisan migrate:fresh  # Reiniciar base de datos
php artisan config:clear   # Limpiar caché de configuración
php artisan cache:clear    # Limpiar caché general

Archivo: backend/config/cors.php

Por defecto permite desarrollo local. Para producción, actualiza:

'allowed_origins' => [
    'https://tu-dominio.com'
],

Archivo: frontend/tailwind.config.js

Personaliza colores, animaciones y más:

theme: {
  extend: {
    colors: {
      primary: { ... },
    },
    animation: { ... }
  }
}

Archivo: frontend/src/main.js

Configura posición, duración y comportamiento:

app.use(Toast, {
    position: "top-right",
    timeout: 3000,
    // ... más opciones
});

• 🔐 Sistema de autenticación de usuarios
• 👥 Colaboración en tiempo real (WebSockets)
• 🏷️ Etiquetas y categorías para tareas
• 📅 Integración con calendario
• 🔔 Recordatorios y notificaciones push
• 📊 Dashboard con estadísticas y métricas
• 🌙 Modo oscuro
• 🌍 Internacionalización (i18n)
• 📱 Aplicación móvil nativa (React Native / Flutter)
• 🔄 Sincronización offline-first
• 📤 Exportar/Importar tareas (CSV, JSON)
• 🔍 Búsqueda avanzada y filtros

• 🎯 Subtareas y listas de verificación
• 📎 Adjuntar archivos a tareas
• 💬 Comentarios en tareas
• 🔗 Integración con Trello, Notion, etc.
• 🤖 Sugerencias con IA para priorización
• 📈 Reportes y análisis de productividad

¡Las contribuciones son bienvenidas! Si quieres mejorar prioreisen:

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

• Sigue el estilo de código existente
• Escribe tests para nuevas funcionalidades
• Actualiza la documentación si es necesario
• Usa commits descriptivos siguiendo Conventional Commits

Este proyecto está bajo la licencia MIT. Ver el archivo LICENSE para más detalles.

Carlos Oliva (colidom)

• GitHub: @colidom
• LinkedIn: Carlos Oliva

• Inspirado en la Matriz de Eisenhower
• Construido con tecnologías open source increíbles
• Diseño inspirado en las mejores prácticas de UI/UX modernas

• Documentación de Vue 3
• Documentación de Laravel
• Guía de Tailwind CSS
• Matriz de Eisenhower en Wikipedia