Loading repository data…
Facz21 / repository
TaskFlowSPA es un sistema de gestión de tareas desarrollado como SPA con JavaScript Vanilla, que implementa autenticación, autorización basada en roles y permisos, vistas protegidas y una arquitectura frontend escalable y modular.
TaskFlowSPA es una aplicacion web tipo SPA (Single Page Application) construida con JavaScript Vanilla, HTML, CSS y Tailwind CSS. Su objetivo es simular un sistema moderno de gestion de tareas y productividad mientras sirve como base practica para aprender arquitectura frontend sin depender de frameworks como React, Vue o Angular.
La aplicacion usara routing del lado del cliente con History API para navegar entre vistas sin recargar toda la pagina, integrando autenticacion, autorizacion por roles, proteccion de rutas, renderizado dinamico y persistencia de datos con un backend fake basado en json-server.
Para simplificar la autenticacion en esta primera SPA, la sesion activa del usuario se manejara con localStorage, mientras que json-server se utilizara para los datos persistentes del sistema.
Este proyecto esta pensado para practicar fundamentos clave del desarrollo frontend moderno:
Este proyecto usara una arquitectura frontend simple por capas (layered architecture) adaptada a una SPA en JavaScript Vanilla.
La idea es separar la aplicacion por responsabilidades para que sea mas facil de aprender, mantener y escalar poco a poco:
main.js como punto de arranque.router/ para la navegacion SPA.views/ para las pantallas principales.components/ para piezas reutilizables.services/ para datos, sesion y comunicacion con el backend fake.utils/ para funciones auxiliares.styles/ para estilos globales y apoyo visual.Esta decision busca que el equipo entienda primero como funciona una SPA antes de pasar a arquitecturas mas avanzadas o mas modulares por dominio.
History API.ADMIN.json-server.ADMINUSERLa SPA deberia incluir, como minimo, los siguientes modulos o vistas:
LoginDashboardMis tareasMi perfilDetalle o formulario de tareaAdministracion de usuarios solo para ADMINPagina 404La estructura inicial del proyecto sera sencilla y progresiva:
src/
main.js
router/
views/
components/
services/
utils/
styles/
services.login.localStorage.localStorage.ADMIN.localStorage.USER solo puede manipular sus propias tareas.USER solo puede editar su propio perfil.USER puede eliminar su propia cuenta.ADMIN puede ver y administrar todas las tareas y usuarios.localStorage.npm run dev: levanta el entorno de desarrollo con Vite.npm run build: genera la version de produccion.npm run preview: sirve localmente el build generado.npm install
npm run dev
json-server con el archivo de datos definido para el proyecto.La persistencia de datos del sistema estara basada en json-server. La idea es simular recursos como:
userstasksEjemplo de responsabilidades del backend fake:
Para mantener el proyecto simple y enfocado en el aprendizaje:
json-server se usara para users y tasks.localStorage se usara para guardar la sesion activa.sessions en el backend fake como parte del flujo principal.Esto permite practicar autenticacion SPA sin agregar complejidad innecesaria en esta primera etapa.
La base del proyecto ya esta montada con Vite. La implementacion funcional de la SPA se ira construyendo de forma progresiva, comenzando idealmente por:
Este proyecto se distribuye bajo la licencia incluida en LICENSE.
Selected from shared topics, language and repository description—not editorial ratings.
dylan571 /
TaskFlowSPA es una aplicacion web tipo SPA (Single Page Application) construida con JavaScript Vanilla, HTML, CSS y Tailwind CSS. Su objetivo es simular un sistema moderno de gestion de tareas y productividad mientras sirve como base practica para aprender arquitectura frontend sin depender de frameworks como React, Vue o Angular.