Este proyecto es un clon simplificado de Trello, construido con Next.js, ShadCN UI y dnd-kit. Permite a los usuarios organizar tareas en un tablero con múltiples listas y tarjetas, con funcionalidad de arrastrar y soltar, edición y eliminación de tarjetas, y persistencia de datos local.
- Tablero Interactivo: Visualización de listas y tarjetas.
- Listas (Columnas): Organización de tareas en diferentes categorías.
- Edición de Títulos de Listas: Permite cambiar el nombre de las columnas.
- Eliminación de Listas: Funcionalidad para eliminar columnas completas.
- Creación Dinámica de Listas: Permite al usuario añadir nuevas columnas al tablero.
- Arrastrar y Soltar Listas: Reordenamiento de columnas en el tablero.
- Tarjetas: Representación de tareas individuales con contenido.
- Arrastrar y Soltar: Reordenamiento de tarjetas dentro de la misma lista y movimiento entre listas.
- Creación y Edición de Tarjetas: Modal intuitivo para añadir y modificar el contenido de las tareas.
- Eliminación de Tarjetas: Funcionalidad para eliminar tareas.
- Persistencia Local de Datos: Los cambios en el tablero se guardan en el
localStoragedel navegador.
Nuestro plan para mejorar este clon de Trello incluye las siguientes funcionalidades:
- Diseño Responsivo: Adaptar la interfaz para que sea completamente funcional y visualmente atractiva en diferentes tamaños de pantalla (móviles, tabletas).
- Funcionalidades de Usuario: Integrar autenticación y permitir a los usuarios crear y gestionar sus propios tableros.
- Backend Real: Migrar la persistencia de datos de
localStoragea una base de datos real con una API REST o GraphQL. - Mejoras Visuales: Añadir animaciones sutiles, transiciones y posiblemente un tema de modo oscuro.
- Detalles Extendidos de la Tarjeta: Implementar campos adicionales en las tarjetas como descripciones detalladas, fechas de vencimiento, etiquetas y asignados.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.