Academia SLV

La web de mis clases particulares de inglés, donde los alumnos estudian y practican el examen y yo gestiono las clases y los pagos.

Periodo
2026 – actualidad
Rol
Desarrollador full stack
Tipo
Proyecto personal. El código es privado: aquí describo la arquitectura. Web
Stack
PHP, MariaDB, JavaScript, HTML, CSS, Hostinger

El problema

Doy clases particulares de inglés para preparar el examen Aptis General del British Council. La teoría, los ejercicios y los deberes iban en documentos sueltos, y las clases dadas, los pagos y lo que debía cada alumno, en notas y hojas de cálculo. Los alumnos necesitaban un sitio claro para estudiar desde el móvil, y yo, uno para seguir su progreso y llevar las cuentas.

Qué hice yo

Es un proyecto personal: lo uso con mis alumnos, y el diseño y todo el código son míos. Lo desarrollé con agentes de Claude Code trabajando por issues en paralelo, y revisé cada cambio antes de fusionarlo.

  • La zona del alumno: sesiones con teoría y ejercicios corregidos al momento, deberes que se entregan y se corrigen, progreso guardado en el servidor y un repaso de las preguntas falladas.
  • Simulacros del Aptis con las pruebas, el orden y los tiempos del examen real.
  • El panel del profesor: alumnos, sesiones asignadas, corrección de escritos, clases, pagos y saldo de cada alumno, con copia de seguridad en CSV.
  • Una página pública de presentación y el despliegue automático en Hostinger al fusionar en main.

Decisiones clave

PHP y JavaScript sin compilación en un hosting compartido

Un framework con su propio servidor habría exigido un hosting más caro y más mantenimiento. Elegí PHP con MariaDB, que corre en el hosting compartido de Hostinger que ya tenía, y un front en HTML, CSS y JavaScript con módulos nativos, sin dependencias ni paso de build. Toda la lectura y escritura de datos pasa por una única capa en el navegador, así que cambiar la API no obliga a tocar las páginas.

El contenido en archivos JSON, no en un editor del panel

Cada sesión es un archivo JSON separado del código, y el panel incluye un validador que señala los errores de formato con su línea y avisa de lo que no sigue el formato del examen. Frente a construir un editor, permite añadir sesiones sin programar y que el contenido crezca sin cambiar la aplicación.

El reloj del simulacro lo lleva el servidor

En un examen cronometrado, un temporizador en el navegador se puede parar recargando la página o cambiando la hora del dispositivo. El servidor guarda la hora de inicio y entrega la prueba cuando se agota el tiempo; el navegador solo pinta la cuenta atrás y se pone en hora con cada guardado. Las preguntas llegan sin las respuestas hasta que se entrega.

Guardar solo los datos imprescindibles

La web guarda datos personales y pagos, así que se diseñó con datos mínimos: sin correo electrónico (si un alumno olvida la contraseña, genero una temporal desde el panel), las fuentes alojadas en la propia web en lugar de servirlas desde Google, y el saldo oculto al alumno salvo que lo active para él. Cada alumno solo ve lo suyo y el repositorio nunca lleva datos reales.

Resultado

  • Mis alumnos preparan el examen en la web: estudian las sesiones, entregan los deberes y hacen simulacros con el formato real.
  • Las clases, los pagos y el saldo de cada alumno ya no se llevan en hojas de cálculo: el panel los calcula solo.
  • Cada cambio fusionado en main está publicado en menos de un minuto, sin subir archivos a mano.