Caso de estudio

Volver a proyectos

Apuntes de JavaScript | Guía interactiva instalable

Mis apuntes de JavaScript en una PWA con buscador global, flashcards de repaso y resaltado de sintaxis.

alvarobarrenadev.github.io
Captura: Apuntes de JavaScript | Guía interactiva instalable
Año
2026
Mi papel
Diseño e implementación
Tecnologías
HTML · Sass · JavaScript · Vite

Punto de partida

El proyecto antes del código

Contexto

Empecé el módulo de JavaScript de Conquer Blocks tomando apuntes en Notion. Funcionaba, pero no era algo que me apeteciera consultar. Decidí convertirlos en una web propia.

Objetivo

Tener una referencia visual, práctica y siempre disponible de todo lo que iba aprendiendo en el módulo de JavaScript, organizada por módulos y clases.

Empezó en Notion

Cuando llegué al módulo de JavaScript de mi máster en Conquer Blocks, empecé tomando apuntes en Notion como hacía con todo. Funcionaba, pero sabía que no los iba a consultar. Notion es cómodo para escribir, pero no es una herramienta que me apetezca abrir cuando quiero repasar algo rápido.

Así que decidí hacer lo que más me gusta: construirlo desde cero.

De apuntes a app

Lo primero fue volcar todo el contenido en una estructura que tuviera sentido: módulos, temas y clases. A partir de ahí, la app fue creciendo sola. Empezó siendo una web de consulta rápida y acabó siendo una PWA instalable con buscador global, sistema de flashcards para repasar, bloques de código con resaltado de sintaxis y botón de copiar, tabla de contenidos flotante con scroll spy y atajos de teclado para navegar sin tocar el ratón.

También tiene modo oscuro y claro automático, tipografía cuidada con Inter y JetBrains Mono, y funciona sin conexión una vez instalada en el móvil o en el ordenador.

Ya había construido webs similares para mis apuntes de inglés y de comunicación. Esta es, sin duda, la mejor de las tres. Precisamente porque tenía experiencia previa, supe organizarme mejor, avanzar más rápido y tomar mejores decisiones desde el principio.

Días en estado de flow

Durante varios días estuve completamente inmerso en el proyecto. Entré en ese estado en el que pierdes la noción del tiempo porque lo que estás haciendo te importa de verdad. No era una obligación: era algo que quería que existiera y que yo mismo iba a usar.

Cuando lo terminé, me encantó el resultado. Y lo sigo usando.

Lo que me llevo

Este proyecto me recordó algo importante: muchas veces es mejor dar el primer paso y actuar que quedarse pensando cómo darlo. Yo suelo ser de los que piensan mucho antes de empezar. Aquí simplemente empecé, y salió bien.

Lo que cambió

Aprendizajes

01

Hacer algo para ti mismo que realmente vas a usar te da una energía completamente distinta. Cuando el proyecto te importa, no es esfuerzo: es flujo.

02

Haber construido proyectos similares antes (apuntes de inglés y comunicación) me permitió avanzar más rápido y tomar mejores decisiones desde el principio. La experiencia acumulada se nota.

03

A veces el primer paso es lo más difícil. Muchas veces es mejor actuar y mejorar sobre la marcha que esperar el momento perfecto para empezar.

Siguiente iteración

Futuras mejoras

  • Implementar un buscador más avanzado con sugerencias en tiempo real y filtros por categorías para localizar conceptos aún más rápido.
  • Reescribir la arquitectura de estilos con una base Sass más escalable, partiendo desde cero para evitar la deuda técnica acumulada.
  • Añadir sincronización de progreso personal: marcar clases como leídas y guardar el avance entre sesiones.