Entre Línies: l’anàlisi de poesia reimaginat

I si analitzar poesia fos tan intuïtiu com llegir les lletres de les teves cançons preferides a Genius?

Entre Línies és una aplicació web moderna que transforma l’anàlisi de la poesia espanyola en una experiència interactiva i atractiva. Construïda per a estudiants, professors i entusiastes de la literatura, combina una anàlisi literària profunda amb patrons d’UX contemporanis.

• React 19
  Piló modern
• TanStack Start
  Framework d’SSR
• TypeScript
  Seguretat de tipus d’extrem a extrem

El Repte

Les eines tradicionals d’anàlisi de poesia són o bé documents PDF obsolets, llocs web estàtics sense interactivitat, o plataformes acadèmiques que semblen de principis dels anys 2000. Els estudiants i professors mereixen alguna cosa millor, necessiten eines modernes i intuïtives que facin que l’anàlisi literària sigui accessible i atractiva.

La Solució

Entre Línies porta l’anàlisi de la poesia a l’era de la web moderna amb una aplicació totalment interactiva i renderitzada al servidor, construïda amb un piló tecnològic modern. Està dissenyada com un projecte personal que fusiona dues de les meves aficions i soluciona un problema comú que vaig trobar en estudiar literatura.

Característiques principals

• Anàlisi vers a vers amb figures retòriques identificades
• Context històric i biografies dels autors
• Destacats interactius - fes clic a qualsevol figura per veure els versos relacionats
• Totalment adaptatiu - des de mòbil fins a escriptori
• Cerca instantània amb filtratge en temps real
• Suport de mode fosc a tota l’aplicació

Disseny i experiència d’usuari

Inici: la teva biblioteca de poesia

La pàgina d’inici presenta els poemes com a targetes boniques i fàcils d’escanejar. Cada targeta mostra el títol del poema, l’autor, l’època i una vista prèvia de mètriques com el nombre de versos i figures retòriques.

Filtratge i ordenació intel·ligents

Filtra els poemes per autor, època o moviment literari. Ordena per títol, data o nombre de versos. Tot s’actualitza en temps real.

Experiència de lectura

El disseny de tres columnes

Els usuaris d’escriptori disposen d’una potent interfície de tres columnes optimitzada per a una anàlisi profunda:

1. Barra lateral esquerra: navegació per poemes i accions ràpides
2. Centre: el poema en si amb anotacions de versos interactives
3. Barra lateral dreta: panell d’anàlisi amb context, figures i mètriques

Anotacions interactives

Passa el cursor per sobre de qualsevol vers per veure indicacions contextuals amb informació instantània sobre figures retòriques, notes històriques o definicions de vocabulari.

Destacat de figures retòriques

Fes clic a qualsevol figura retòrica del panell d’anàlisi i observa com s’il·luminen tots els versos relacionats del poema. Això crea connexions visuals que fan que la comprensió de dispositius literaris complexos sigui intuïtiva.

Disseny pensat primer per a mòbils

Dissenys adaptatius

En el mòbil, el disseny de tres columnes es transforma en una vista simplificada d’una sola columna amb panells desplegables. El panell d’anàlisi es converteix en un calaix que llisca des de la part inferior.

Mode lectura

Activa el Mode lectura per eliminar totes les distraccions de la IU i centrar-te exclusivament en la poesia. Perfecte per a sessions de lectura profunda o presentacions a l’aula.

Funcions avançades

Barra d’accions i interaccions

La barra d’accions proporciona accés ràpid a funcions essencials:

• Marca poemes com a preferits amb una animació de ‘m’agrada’ encantadora
• Comparteix directament utilitzant l’API nativa de Web Share
• Dreceres de teclat per a usuaris avançats

Filtratge intel·ligent

Aplica diversos filtres simultàniament: combina autors, èpoques i moviments literaris per trobar exactament el que necessites.

// Map-based indexes for O(1) lookups instead of O(n) filters
const poemsByAuthor = new Map<string, Poem[]>();
const figuresByType = new Map<string, Figure[]>();

interface Poem {
  id: string;
  title: string;
  author: Author;
  era: Era;
  verses: Verse[];
  figures: Figure[];
  context: Context;
  metrics: {
    verseCount: number;
    figureCount: number;
    readingTime: number;
  };
}

const highlightFigure = (figureId: string) => {
  const relatedVerses = figureToVerseMap.get(figureId) ?? [];

  // Batch DOM updates for performance
  requestAnimationFrame(() => {
    relatedVerses.forEach(verseId => {
      document
        .querySelector(`[data-verse-id="${verseId}"]`)
        ?.classList.add('highlighted');
    });
  });
};

/* Mobile-first approach */
.layout {
  grid-template-columns: 1fr; /* Mobile */
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 240px 1fr; /* Tablet */
  }
}

@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 280px 1fr 320px; /* Desktop */
  }
}

{
  "buildCommand": "pnpm build",
  "outputDirectory": "dist",
  "framework": "vite",
  "installCommand": "pnpm install"
}

Punts clau

Per a reclutadors

• Piló modern: React 19, TypeScript, TanStack Start (SSR)
• Prioritat al rendiment: estructures de dades optimitzades, generació estàtica, puntuacions de Lighthouse perfectes
• Sistemes de disseny: inspirat en shadcn/ui, totalment adaptatiu, mode fosc
• Accessibilitat: compleix amb WCAG, navegació per teclat, HTML semàntic
• Llest per a producció: desplegat a Vercel amb pipeline de CI/CD

Per a desenvolupadors

• Arquitectura: React renderitzat al servidor amb hidratació al costat del client
• Estratègia de dades: dades estàtiques amb índexs basats en Map per a cerques O(1)
• Seguretat de tipus: TypeScript complet d’extrem a extrem amb mode estricte
• Estil: Tailwind CSS amb tokens de disseny personalitzats
• Gestió d’estat: TanStack Router per a l’estat gestionat per URL
• Desplegament: Vercel amb entorns de vista prèvia automàtics

Per a entusiastes de la literatura

• Intuïtiu: sense corba d’aprenentatge: passa el cursor, fes clic, explora
• Ràpid: navegació instantània, sense indicadors de càrrega
• Bonic: interfície neta i moderna que respecta les teves preferències
• Accessible: funciona en qualsevol dispositiu, qualsevol mida de pantalla, qualsevol mètode d’entrada
• Educatiu: fa que l’anàlisi de la poesia sigui atractiva i accessible

Conclusió

Entre Línies representa la intersecció entre la literatura i la tecnologia web moderna. En aplicar patrons d’UX contemporanis a l’anàlisi de la poesia clàssica, demostra com les eines digitals poden millorar, en lloc de substituir, l’aprenentatge tradicional.

El projecte mostra l’excel·lència tècnica a través de l’optimització del rendiment, la seguretat de tipus i l’accessibilitat, mantenint el focus en l’experiència de l’usuari i el valor educatiu. És un testimoni de com l’enginyeria reflexiva pot fer que temes complexos siguin més accessibles i atractius per a tothom.