🔒 Documento Privado — Solo visible con este link

Reporte del Proyecto Oraltek

Sistema web completo para Clínica Dental Dr. Julio Donjuán

Actualizado: Marzo 2026 · Tecnología por LOUST.PRO · Gestión por CheckItOut

📋 ¿Qué es este proyecto?

Oraltek.mx es un sistema web completo y a medida para la clínica dental del Dr. Julio Donjuán en San Luis Potosí. No es una plantilla ni un WordPress genérico — es una plataforma diseñada específicamente para la operación de la clínica.

Incluye: página pública profesional (la que ven los pacientes), paneles privados de administración (uno diferente para cada rol: doctor, recepción, marketing, soporte), API propia con 126+ endpoints, base de datos con 26 tablas y 202 tests automatizados que verifican que todo funcione.

El sistema corre en un servidor VPS en Chicago, Illinois (2 vCPU AMD EPYC, 4 GB RAM, SSD NVMe) — un servidor dedicado, no hosting compartido. Esto da control total sobre rendimiento, seguridad y escalabilidad.

119Archivos fuenteCada uno es una pieza del sistema: páginas, componentes, rutas de API, servicios, estilos
39Páginas webPáginas públicas + dinámicas + 22 paneles de administración
126+Endpoints APILas "puertas" del sistema — cada acción (agendar cita, ver notificaciones) usa un endpoint
26Tablas de BDDonde vive la información: pacientes, citas, doctores, reseñas, servicios, facturas
18ComponentesPiezas reutilizables: carrousel, mapa, chatbot, reseñas, formularios...
202Tests automáticosPruebas que verifican todo — si algo se rompe, los tests lo atrapan antes
28Versiones GitCada commit es una versión guardada — historial completo y poder revertir cambios
100%Lighthouse SEOHerramienta de Google para medir calidad web. 100% = máxima optimización para buscadores

🧠 ¿Por qué esta tecnología?

🌐 Frontend — Astro 6 + SSR

La página que ven los pacientes. Genera HTML ultra-rápido que carga en menos de 1 segundo.

  • SSR (Server-Side Rendering) — el servidor genera cada página al momento, con datos siempre frescos
  • "Islands Architecture" — solo las partes interactivas cargan JavaScript. El resto es HTML puro = mucho más rápido que WordPress o React
  • View Transitions — al navegar, la transición es instantánea como una app de celular
  • Prefetch inteligente — cuando pasas el cursor sobre un link, ya se empieza a cargar esa página
  • CSS custom mobile-first — diseñado primero para celular, sin frameworks pesados

⚡ Backend — Node.js + API REST

El "cerebro" que procesa todas las acciones: login, citas, notificaciones, etc.

  • Node.js v24 — motor usado por Netflix, PayPal, LinkedIn. Rápido y eficiente
  • 126+ endpoints protegidos — cada acción tiene su "puerta" segura con validación
  • TypeScript + Zod — código con tipos + validación automática de datos
  • 202 tests — se ejecutan antes de cada deploy para verificar que nada se rompa
  • Sin WordPress ni PHP — CMS propio más moderno, seguro y personalizable

🗄️ Base de Datos — SQLite WAL

Donde se guarda toda la información de la clínica de forma segura.

  • 26 tablas organizadas: usuarios, citas, servicios, recetas, facturas, etc.
  • WAL mode — lectura y escritura simultánea sin bloqueos
  • Portable — toda la BD es un solo archivo, fácil de respaldar

🏗️ Infraestructura

Servidor y herramientas que mantienen todo funcionando 24/7.

  • VPS en Chicago — 2 vCPU, 4 GB RAM, 100 GB NVMe SSD. Servidor solo para Oraltek
  • PM2 — reinicia automáticamente si algo falla + logs rotativos
  • Nginx — SSL, cache, compresión y proxy inverso
  • Git + GitHub — cada cambio registrado con fecha, hora y descripción
  • Modo mantenimiento — si necesita actualización, muestra página especial en vez de error

📖 De hosting compartido a servidor propio

Antes: El sitio estaba en hosting compartido (Neubox) con cPanel y LiteSpeed. Sin SSH — solo FTP. Esto limitaba mucho lo que se podía hacer.

Decisión inicial: Se eligió Astro porque genera HTML estático que se puede subir por FTP a cualquier hosting. Los archivos .htaccess del proyecto son de esa época — reglas para que Astro y WordPress coexistieran en Apache. (.htaccess = archivo de configuración de Apache que controla redirecciones y permisos)

Migración: Al crecer el proyecto con API, BD y paneles, se migró a un VPS propio con SSH, Node.js, PM2 y Nginx.

Script de scraping: Se programó un script que descargó todas las fotos del sitio anterior automáticamente — fotos de doctores, galería, certificaciones. Sin esto, hubiera sido manual una por una.

Resultado: Ya no dependemos de WordPress ni de cPanel. CMS propio que es más rápido, seguro y personalizado.

🔒 Seguridad — ¿Por qué es más seguro que WordPress?

❌ WordPress

  • Miles de plugins con vulnerabilidades conocidas
  • Objetivo #1 de hackers (43% de la web usa WP)
  • Panel /wp-admin expuesto por defecto
  • Actualizaciones que pueden romper el sitio

✅ Nuestro Sistema

  • Código a medida — sin plugins de terceros
  • Contraseñas con hash SHA-256 — nunca en texto plano
  • Tokens de sesión con expiración automática
  • Validación Zod en cada endpoint
  • Rate limiting contra fuerza bruta
  • Headers de seguridad: CSP, HSTS, X-Frame-Options
  • RBAC — cada usuario solo ve lo que su rol permite

🖥️ 22 Paneles de Administración por Rol

Cada persona ve un panel diferente según su rol. Esto protege información sensible y muestra solo lo necesario.

SUPERADMIN

Dr. Julio — Acceso Total

22 páginas: citas, pacientes, recetas, reseñas, servicios, blog, galería, testimonios, usuarios, doctores, facturación, analítica, redes sociales, marketing, email, reportes, soporte, sistema, hosting, bandeja, perfil.

ADMIN

Administradores

20 páginas: todo excepto panel técnico del servidor.

SOPORTE

Soporte Técnico

15 páginas: panel técnico, hosting, tickets, navegador de BD, diagnósticos.

DOCTOR

Doctores

10 páginas: sus citas, pacientes, recetas, reseñas, servicios, perfil.

RECEPCIÓN

Gestión de Citas

15 páginas: agenda global, pacientes, servicios, galería, coordinación.

PACIENTE

Portal de Pacientes

2 páginas: perfil y datos personales. En el sitio público: citas, reseñas, chatbot.

🌐 Páginas Públicas

  • Inicio — hero, servicios, equipo, testimonios video, reseñas, certificaciones, galería, blog, FAQ, mapa, contacto
  • Servicios — catálogo con búsqueda en tiempo real y filtros. Cada servicio tiene página dinámica propia (se genera automática desde la BD, no manual)
  • Doctores — directorio + perfiles estilo Doctoralia con tabs: info, servicios, reseñas, ubicación (páginas dinámicas: agregar doctor nuevo = página automática)
  • Blog — artículos con editor markdown en el panel
  • Agendar Cita — formulario conectado al sistema de la recepción
  • Página 404 — diseño Oraltek con navegación (en vez de error genérico)
  • Chatbot — asistente virtual integrado en todas las páginas
  • PWA — "instalar" el sitio en el celular como app desde el navegador

🚀 Velocidad y Rendimiento

El sitio carga en menos de 1 segundo gracias a:

  • Prefetch — al pasar el cursor sobre un link, ya se descarga en segundo plano
  • Cache 1 año — CSS, JS e imágenes se guardan en el navegador
  • Compresión Gzip/Brotli — reduce tamaño hasta 70%
  • Lazy loading — imágenes fuera de pantalla no cargan hasta ser visibles
  • Sin frameworks pesados — HTML + CSS + mínimo JS = carga ultra-rápida

🗄️ 26 Tablas de Base de Datos

Cada tabla guarda un tipo específico de información. Todas trabajan juntas.

usersCuentas de acceso — nombre, email, rol, contraseña segura
doctorsPerfiles de doctores — cédula, especialidades, horarios
clientsPacientes — historial, contacto, alergias, notas
servicesCatálogo — precio, duración, categoría, doctor
appointmentsCitas — paciente, doctor, fecha, estado, seguimiento
reviewsReseñas — puntuación, texto, video, aprobación
prescriptionsRecetas — medicamentos, dosis, indicaciones
patient_notesNotas clínicas del doctor
billingFacturación — cobros, pagos, montos
blog_postsArtículos del blog
notificationsAlertas del sistema
sessionsSesiones de login seguras
password_resetsRecuperación de contraseñas y magic links
portfolio_photosGalería de fotos
video_testimonialsVideos de testimonios
social_postsGestión de redes sociales
ad_reportsReportes de campañas
email_campaignsEmail marketing
newsletter_subscribersSuscriptores al boletín
support_ticketsTickets de soporte
ticket_repliesRespuestas a tickets
analytics_configGoogle Analytics, Meta Pixel
follow_up_plansSeguimiento de pacientes
internal_notesNotas internas del equipo
blog_categoriesCategorías del blog

🛠️ Stack Tecnológico

Astro 6Framework frontend
Node.js v24Motor del servidor
TypeScriptCódigo con tipos
SQLite + WALBase de datos
PM2Process manager 24/7
NginxSSL, cache, proxy
Git / GitHubControl de versiones
CSS3 CustomEstilos manuales
ZodValidación de datos
better-sqlite3Driver de BD
NodemailerEnvío de emails
Tailwind CSSUtilidades puntuales

🔌 126+ Endpoints API protegidos

Cada endpoint requiere autenticación (token) y verifica rol. No se accede sin autorización.

🔐 Auth (13)

Login, sesiones, magic links, cambio de contraseña, usuarios

📅 Citas (5)

Agendar, listar, editar, seguimiento

👨‍⚕️ Doctores (7)

Perfiles, onboarding, QR

🦷 Servicios (5)

Catálogo CRUD

⭐ Reseñas (7)

Enviar, aprobar, videos

📝 Blog (8)

Artículos, categorías

📊 Analítica (8)

GA, Pixel, scripts

💰 Facturación (6)

Cobros, pagos

📢 Social (5+)

Redes, campañas, email

📸 Media (13)

Galería, videos, portafolio

🎫 Soporte (8)

Tickets, estadísticas

⚙️ Sistema (15+)

Reportes, tech, health

📅 Timeline — 14 días de desarrollo

Del 12 al 26 de marzo 2026 — 28 versiones. Desarrollo acelerado con flujos agénticos de IA e inversión en modelos de frontera, llevando tecnología enterprise a emprendedores a mejor costo.

13 Mar — Día 1

Fundación

Repositorio, Astro + WP headless, scraper de imágenes, 24 páginas, componentes core, primer deploy.

14 Mar — Día 2

UX + Perfiles

Gallery zoom, glassmorphism, 38+ servicios, dev environment.

24 Mar — Día 12

Migración VPS + API

De Neubox a VPS. TypeScript API + SQLite, 25+ tablas, SSR, PWA, PM2, 18 dashboards.

25 Mar — Día 13

Dashboard completo

22 páginas panel, role-based sidebar, email marketing, video upload, 189 tests.

25-26 Mar — Día 14

Auth + Tests finales

Magic links, cambio de contraseña, View Transitions, 202 tests, accesos.

🚀 Estado del Proyecto

✅ Completado

  • 39 páginas (públicas + dashboard)
  • 126+ endpoints protegidos
  • 22 paneles por rol
  • 26 tablas BD
  • 202 tests automatizados
  • Auth completa con magic links
  • Blog, recetas, facturación
  • Migración completa
  • SEO 100% + Sitemap

🔄 En mejora

  • Edición inline de citas
  • Reportes de campañas reales
  • Galería antes/después
  • Notificaciones email

📋 Próximos

  • Más doctores
  • Pagos online
  • App nativa (si se requiere)
  • Integración Doctoralia

💰 Estado de Cuenta

Inversión total$8,000 MXN
Pendiente$4,000 MXN