https://github.com/blackpachamame/todo-app
Aplicación de tareas pendientes, desafío de frontendmentor.
https://github.com/blackpachamame/todo-app
dnd-kit javascript react tailwindcss
Last synced: 2 days ago
JSON representation
Aplicación de tareas pendientes, desafío de frontendmentor.
- Host: GitHub
- URL: https://github.com/blackpachamame/todo-app
- Owner: Blackpachamame
- Created: 2023-11-29T03:05:49.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-21T14:37:10.000Z (10 months ago)
- Last Synced: 2025-06-19T10:51:09.687Z (4 months ago)
- Topics: dnd-kit, javascript, react, tailwindcss
- Language: JavaScript
- Homepage: https://todo-app-neon-kappa.vercel.app
- Size: 535 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Todo app
## Tabla de contenido
- [Tabla de contenido](#tabla-de-contenido)
- [Descripción](#descripción)
- [Desafío](#desafío)
- [Mi Procedimiento](#mi-procedimiento)
- [Construido con](#construido-con)
- [Lo que aprendí](#lo-que-aprendí)
- [Recursos útiles](#recursos-útiles)
- [Autor](#autor)
## Descripción
### Desafío
Su desafío es desarrollar esta aplicación de tareas pendientes y lograr que se parezca lo más posible al diseño.
Puedes usar cualquier herramienta que te guste para ayudarte a completar el desafío. Entonces, si tienes algo que te gustaría practicar, no dudes en intentarlo.
Sus usuarios deberían poder:
- Agregar nuevas tareas a la lista
- Marcar tareas como completadas
- Eliminar tareas de la lista
- Filtrar tareas por activas/completadas
- Borrar todas las tareas completadas
- Alternar modo claro y oscuro
- Ver el diseño óptimo según el tamaño de la pantalla de su dispositivo
- Ver estados de desplazamiento para elementos interactivos
- **Bonus:** Drag and drop para reordenar los elementos de la lista
- **Bonus:** ~~Cree este proyecto como una aplicación full-stack~~
## Mi Procedimiento
### Construido con
- React
- JavaScript
- Tailwind CSS
- Dnd kit
### Lo que aprendí
- Profundice las clases con Tailwind, por ejemplo, la clase `truncate` es un conjunto de propiedades de CSS: `overflow: hidden`, `white-space: nowrap`, `text-overflow: ellipsis`. Con ellas podemos evitar que un texto se desborde y salga del contenedor.
- Items `drag and drop` con `dnd kit`
### Recursos útiles
- [Dnd kit](https://dndkit.com/) - Documentación.
- [Fazt Code - Drag and Drop en React](https://www.youtube.com/watch?v=swFjfjLXe3I) - Tutorial de Dnd Kit.
## Autor
- Github - [Blackpachamame](https://github.com/Blackpachamame)
- Frontend Mentor - [@Blackpachamame](https://www.frontendmentor.io/profile/Blackpachamame)
