Ariel Admin Dashboard

Panel administrativo full-stack para el portafolio de Ariel David Hernandez Padilla, orientado a vacantes Jr / Junior+ remotas con Next.js, TypeScript, PostgreSQL, Prisma, Better Auth, shadcn/ui y Tailwind CSS.

Objetivo

Construir una app realista y defendible en entrevista: autenticacion, roles, CRUD, dashboard con metricas, filtros, busqueda, paginacion, validaciones y documentacion clara. El alcance evita inflar el proyecto con features que no aportan a una vacante junior.

Stack

• Next.js 16 App Router + React 19
• TypeScript estricto
• Tailwind CSS v4 + shadcn/ui
• Better Auth con email/password
• PostgreSQL + Prisma ORM
• Zod para validaciones
• Docker Compose para base local
• pnpm como gestor de paquetes

MVP incluido

• Login con Better Auth y credenciales seed
• Roles ADMIN, MANAGER, VIEWER
• Dashboard privado con metricas de proyectos
• CRUD inicial de proyectos con crear, editar, cambio de estado y borrado por rol
• Tareas por proyecto con crear, avanzar estado y eliminar por rol
• Clientes con crear, editar y eliminar cuando no tienen proyectos asociados
• Selector de tema claro, oscuro o sistema
• Confirmaciones antes de eliminar y toasts para feedback de acciones
• Clientes, proyectos y tareas modelados en PostgreSQL
• Filtros por texto, estado y paginacion por query params
• API protegida GET /api/projects
• Seed reproducible para demo tecnica

Credenciales demo

admin@ariel.dev
Admin123!

Si no existe DATABASE_URL, la app abre en modo demo con datos en memoria para que el reclutador pueda ver la interfaz sin preparar infraestructura.

Setup local

cp .env.example .env
docker compose up -d
pnpm install
pnpm db:generate
pnpm db:migrate
pnpm db:seed
pnpm dev

Abre http://localhost:3001.

Backlog por fases

1. MVP base: auth, roles, dashboard, CRUD, filtros, seed.
2. Calidad: tests de acciones, estados vacios, manejo de errores y loading states.
3. Deploy: Vercel + Postgres administrado, variables de entorno y README con screenshots.
4. Entrevista: documentar decisiones tecnicas, tradeoffs y mejoras futuras.

Decisiones defendibles

• Better Auth mantiene la autenticacion dentro de la app y evita depender de un SaaS externo para el MVP.
• Prisma acelera modelado y migraciones para PostgreSQL, con tipos claros para entrevista.
• shadcn/ui da componentes accesibles y editables sin esconder implementacion.
• Los checks de sesion se hacen en paginas/rutas protegidas, no solo en proxy, para no depender de una barrera superficial.
• pnpm fija instalaciones reproducibles y evita mezclar package managers.
• Las acciones destructivas usan confirmacion para reducir errores de usuario.

Deploy

Variables necesarias:

DATABASE_URL=
BETTER_AUTH_SECRET=
BETTER_AUTH_URL=

Para Vercel:

1. Crear una base PostgreSQL administrada.
2. Configurar las variables de entorno.
3. Ejecutar migraciones con pnpm db:migrate.
4. Crear usuario demo con pnpm db:seed si el deploy sera publico para reclutadores.
5. Usar BETTER_AUTH_URL con la URL final del deploy.

Como explicarlo en entrevista

• Problema: un panel administrativo realista para operaciones de clientes, proyectos y tareas.
• Arquitectura: App Router con Server Components para lectura, Server Actions para mutaciones y Route Handlers para API externa.
• Datos: PostgreSQL modelado con Prisma; relaciones cliente-proyecto-tarea y borrado en cascada donde tiene sentido.
• Auth: Better Auth con email/password, cookies seguras y validacion de permisos en servidor.
• UI: shadcn/ui, tema claro/oscuro/sistema, feedback por toast y confirmaciones destructivas.
• Tradeoff: el modo demo permite revisar la interfaz sin DB, pero las mutaciones reales requieren PostgreSQL.