Entre Líneas: Poetry Analysis Reimagined

What if analyzing poetry could be as intuitive as reading your favorite lyrics on Genius?

Entre Líneas is a modern web application that transforms Spanish poetry analysis into an interactive, engaging experience. Built for students, teachers, and literature enthusiasts, it combines deep literary analysis with contemporary UX patterns.

• React 19
  Modern stack
• TanStack Start
  SSR framework
• TypeScript
  End-to-end typesafety

The Challenge

Traditional poetry analysis tools are either outdated PDF documents, static websites with no interactivity, or academic platforms that feel like they’re from the early 2000s. Students and teachers deserve better, they need modern, intuitive tools that make literary analysis accessible and engaging.

The Solution

Entre Líneas brings poetry analysis into the modern web era with a fully interactive, server-rendered application built with a modern stack, designed as a personal project that merges 2 of my hobbies and solves a common problem I found when studying literature.

Core Features

• Verse-by-verse analysis with identified rhetorical figures
• Historical context and author biographies
• Interactive highlights - click any figure to see related verses
• Fully responsive - from mobile to desktop
• Instant search with real-time filtering
• Dark mode support throughout

Design & User Experience

Home: Your Poetry Library

The landing page presents poems as beautiful, scannable cards. Each card displays the poem’s title, author, era, and a preview of metrics like number of verses and rhetorical figures.

Smart Filtering & Sorting

Filter poems by author, era, or literary movement. Sort by title, date, or number of verses. Everything updates in real-time.

Reading Experience

The Three-Column Layout

Desktop users get a powerful three-column interface optimized for deep analysis:

1. Left sidebar: Poem navigation and quick actions
2. Center: The poem itself with interactive verse annotations
3. Right sidebar: Analysis panel with context, figures, and metrics

Interactive Annotations

Hover over any verse to see contextual tooltips with instant information about rhetorical figures, historical notes, or vocabulary definitions.

Rhetorical Figure Highlighting

Click on any rhetorical figure in the analysis panel, and watch as all related verses light up in the poem. This creates visual connections that make understanding complex literary devices intuitive.

Mobile-First Design

Responsive Layouts

On mobile, the three-column layout transforms into a streamlined single-column view with collapsible panels. The analysis panel becomes a drawer that slides up from the bottom.

Read Mode

Toggle Read Mode to remove all UI distractions and focus purely on the poetry. Perfect for deep reading sessions or classroom presentations.

Advanced Features

Action Bar & Interactions

The action bar provides quick access to essential functions:

• Favorite poems with a delightful like animation
• Share directly using the native Web Share API
• Keyboard shortcuts for power users

Smart Filtering

Apply multiple filters simultaneously: combine authors, eras, and literary movements to find exactly what you need.

// 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"
}

Key Takeaways

For Recruiters

• Modern stack: React 19, TypeScript, TanStack Start (SSR)
• Performance-first: Optimized data structures, static generation, perfect Lighthouse scores
• Design systems: shadcn/ui inspired, fully responsive, dark mode
• Accessibility: WCAG compliant, keyboard navigation, semantic HTML
• Production-ready: Deployed on Vercel with CI/CD pipeline

For Developers

• Architecture: Server-rendered React with client-side hydration
• Data strategy: Static data with Map-based indexes for O(1) lookups
• Type safety: Full end-to-end TypeScript with strict mode
• Styling: Tailwind CSS with custom design tokens
• State management: TanStack Router for URL-driven state
• Deployment: Vercel with automatic preview environments

For Literature Enthusiasts

• Intuitive: No learning curve—hover, click, explore
• Fast: Instant navigation, no loading spinners
• Beautiful: Clean, modern interface that respects your preferences
• Accessible: Works on any device, any screen size, any input method
• Educational: Makes poetry analysis engaging and approachable

Conclusion

Entre Líneas represents the intersection of literature and modern web technology. By applying contemporary UX patterns to classical poetry analysis, it demonstrates how digital tools can enhance rather than replace traditional learning.

The project showcases technical excellence through performance optimization, type safety, and accessibility, while maintaining a focus on user experience and educational value. It’s a testament to how thoughtful engineering can make complex subjects more accessible and engaging for everyone.