​

Component Library

​

Component Architecture

• Presentational Components: Pure components that receive data via props
• Container Components: Components with internal state using useState and useEffect
• Controlled Components: Form elements controlled by parent state

​

Component Categories

​

Core Components

​

Movie Display Components

• PeliculaCard - Individual movie card with poster, metadata, and actions
• PeliculaGrid - Responsive grid layout for displaying multiple movies

​

Interactive Components

• SearchBar - Text input for searching movies by title, director, or actor
• CategoryFilter - Dropdown for filtering movies by genre
• TrailerModal - Full-screen modal for displaying movie trailers

​

Layout Components

• Header - Main navigation header with logo and menu links
• Footer - Site footer with links and contact information
• LoadingSpinner - Loading indicator for async operations

​

Styling Approach

<div className="component-name">
  <div className="component-name__element">
    <button className="component-name__button component-name__button--active">
      Click me
    </button>
  </div>
</div>

​

State Management Patterns

const [showTrailer, setShowTrailer] = useState(false);
const [imageError, setImageError] = useState(false);

<SearchBar 
  searchTerm={searchTerm} 
  onSearchChange={setSearchTerm} 
/>

useEffect(() => {
  document.addEventListener('keydown', handleEsc);
  return () => document.removeEventListener('keydown', handleEsc);
}, [onClose]);

​

Import Patterns

import PeliculaCard from './components/PeliculaCard';
import PeliculaGrid from './components/PeliculaGrid';
import SearchBar from './components/SearchBar';
import CategoryFilter from './components/CategoryFilter';
import TrailerModal from './components/TrailerModal';

​

Next Steps