Full StackDashboardFile Management

ZeroBox
gestor de archivos

Aplicación web para gestionar archivos, carpetas e imágenes con autenticación, almacenamiento en ImageKit, dashboard privado y herramientas visuales con IA.

Caso de estudio

Del problema al resultado

Una lectura rápida del contexto, la solución construida y la evidencia que permite evaluar el impacto real del proyecto.

01
Problema
Qué había que resolver

La gestión de archivos en aplicaciones web puede volverse confusa cuando no hay una estructura clara para organizar contenido, visualizar archivos recientes o separar carpetas y recursos multimedia. Además, integrar servicios como ImageKit requiere cuidar la seguridad, ya que las operaciones de administración no deben ejecutarse directamente desde el navegador con claves privadas.

02
Solución
Cómo se construyó

ZeroBox resuelve esto con un dashboard privado donde el usuario puede subir archivos, crear carpetas, consultar su espacio personal y revisar actividad reciente. La arquitectura separa responsabilidades: el frontend maneja la experiencia visual y la interacción del usuario, mientras Appwrite se encarga de autenticación y funciones seguras para comunicarse con ImageKit.

03
Resultado
Qué se consiguió

El resultado es una aplicación funcional de almacenamiento y organización de archivos con una experiencia visual consistente, rápida y moderna. ZeroBox permite centralizar archivos, imágenes y videos en un solo espacio, con navegación clara, acciones rápidas y estados visuales que ayudan al usuario a entender qué está ocurriendo en cada momento.

100%
Interfaz responsive

Diseño adaptado para desktop y mobile con landing page y dashboard privado.

3
Vistas principales

Home, Mi ZBox y Actividad reciente para organizar y consultar archivos.

Arquitectura

Stack técnico por capas

Separación real entre interfaz, API, almacenamiento y servicios externos utilizados en el proyecto.

01Frontend
REACTTYPESCRIPTVITEREACT ROUTERTAILWIND CSSSHADCN/UILUCIDE REACT
02Backend / API
APPWRITE FUNCTIONSAPPWRITE AUTHNODE.JS
03Base de datos
APPWRITE DATABASE
04Servicios externos
IMAGEKITAPPWRITEVERCEL

ZeroBox: un gestor de archivos moderno

ZeroBox es una aplicación web de gestión de archivos diseñada para ofrecer una experiencia limpia, moderna y productiva. Permite a los usuarios autenticarse, subir archivos, crear carpetas, visualizar contenido multimedia, consultar actividad reciente y aplicar transformaciones visuales con IA sobre imágenes. El proyecto combina React, TypeScript, Appwrite e ImageKit para construir una experiencia completa de almacenamiento y organización. La aplicación separa correctamente las operaciones públicas y privadas: el frontend maneja la experiencia del usuario, mientras que las operaciones sensibles de gestión de archivos se delegan a una capa segura mediante Appwrite Functions.

📁
Organización por carpetas
Permite crear carpetas y organizar archivos dentro del espacio personal del usuario.
☁️
Subida de archivos
Los usuarios pueden subir imágenes, videos y documentos directamente desde el dashboard.
🖼️
Previsualización multimedia
La aplicación permite visualizar imágenes y videos desde una interfaz limpia sin salir del panel.
🤖
Herramientas con IA
Integra transformaciones visuales para imágenes usando las capacidades de ImageKit.
01
Separar operaciones sensibles del frontend
ImageKit requiere claves privadas para operaciones de administración como listar archivos, crear carpetas, renombrar o eliminar. El reto fue evitar exponer esas claves en el navegador y delegar esas operaciones a una capa segura mediante Appwrite Functions.
02
Sincronizar la interfaz después de acciones
Después de subir archivos o crear carpetas, la aplicación debía actualizar la interfaz sin que el usuario recargara manualmente. Se trabajó con revalidación de loaders y estados de carga para refrescar la información automáticamente.