Frontend
React + TypeScript
Interfaz, navegación, estado de autenticación y gestión de proyectos y tareas desde el cliente.
Proyecto personal Case study
DevTrayck
Aplicación full-stack para organizar proyectos, bugs, mejoras y tareas de desarrollo mediante un flujo Kanban.
Rol
Full-Stack Development
Tipo
Proyecto personal
Frontend
React + TypeScript
Backend
Django REST Framework
DevTrayck / Project board
01 / La idea
Una herramienta sencilla para organizar trabajo de desarrollo.
DevTrayck nació como un proyecto personal alrededor de un problema familiar para cualquier desarrollador: mantener organizados bugs, nuevas funcionalidades, mejoras y tareas pendientes dentro de diferentes proyectos.
La idea fue mantener el flujo simple y visual mediante un tablero Kanban donde cada tarea puede avanzar entre pendiente, en progreso y completada.
02 / El objetivo
Construir una aplicación full-stack de principio a fin.
Más allá del tablero de tareas, el proyecto fue una oportunidad para construir una aplicación completa separando frontend y backend, diseñando una API REST y resolviendo autenticación, persistencia, navegación y estado en el cliente.
Cada cuenta mantiene sus propios proyectos y tareas mientras el frontend consume recursos protegidos expuestos por la API.
03 / Arquitectura
Frontend y backend desacoplados mediante una API REST.
La interfaz y la API evolucionan de manera independiente y se comunican mediante peticiones HTTP, manteniendo separadas la experiencia del usuario y la lógica del servidor.
API
Django REST Framework
Endpoints para autenticación, proyectos y tareas con acceso restringido a la información del usuario autenticado.
Autenticación
JWT
Access y refresh tokens para mantener sesiones y proteger los recursos expuestos por la API.
04 / Funcionalidades
Un flujo pensado alrededor de proyectos y tareas.
Las funcionalidades principales se mantienen deliberadamente enfocadas en organizar trabajo de desarrollo sin convertir el producto en una herramienta excesivamente compleja.
Kanban
Flujo visual de trabajo
Las tareas se organizan entre Pending, In Progress y Done, permitiendo visualizar rápidamente el estado del proyecto.
Drag & drop
Cambios de estado mediante interacción
Las tareas pueden moverse y reordenarse directamente desde el tablero utilizando dnd-kit.
Clasificación
Prioridad y tipo de tarea
Bugs, features, mejoras y refactors pueden clasificarse además por prioridad para aportar contexto al tablero.
Gestión
CRUD completo
Proyectos y tareas pueden crearse, consultarse, editarse y eliminarse desde una interfaz conectada con la API.
05 / Modo demo
Probar el producto sin crear una cuenta.
Para reducir la fricción al mostrar el proyecto, desarrollé un modo demo con un proyecto precargado y tareas que pueden consultarse, crearse, editarse y moverse dentro del tablero.
La información del modo demo se mantiene en el navegador, mientras las acciones reservadas para una cuenta real permanecen separadas del flujo normal de la aplicación.
Objetivo
Permitir que alguien pueda entender y experimentar DevTrayck en pocos segundos antes de decidir si quiere registrarse.
06 / Autenticación y datos
Cada usuario trabaja únicamente con sus propios recursos.
El backend protege los endpoints mediante JWT y filtra proyectos y tareas de acuerdo con el usuario autenticado. De esta forma, la separación de datos no depende únicamente de lo que muestre la interfaz.
01
Login
La API entrega access y refresh tokens después de autenticar las credenciales.
02
Peticiones protegidas
El frontend utiliza el token al consumir los endpoints que requieren autenticación.
03
Aislamiento
Los recursos que devuelve la API pertenecen al usuario que realiza la petición.
07 / Stack
ReactTypeScriptViteTailwind CSSReact Routerdnd-kitPythonDjangoDjango REST FrameworkSimple JWT
08 / Resultado
Un proyecto para practicar el ciclo completo de una aplicación web.
DevTrayck me permitió trabajar de forma integrada con interfaz, estado en cliente, comunicación con APIs, autenticación y lógica de backend dentro de un mismo producto.
El proyecto continúa siendo una base sobre la que puedo seguir incorporando funcionalidades y profundizando en decisiones de arquitectura, calidad y experiencia de usuario.