Movie Components Example

A simple React project demonstrating the usage of components and props in a clean, modern movie listing interface.

🎯 Purpose

This project serves as an educational example showcasing:

• Component composition - Building reusable UI components
• Props usage - Passing data between components
• TypeScript interfaces - Type-safe component props
• Modern CSS - Clean, responsive styling

🏗️ Project Structure

src/
├── App.tsx          # Main app component with movie data
├── MovieItem.tsx    # Reusable movie card component
├── App.css         # Legacy styles (empty)
└── index.css       # Main styling

🧩 Components

App Component

• Purpose: Main container that holds movie data and renders the grid
• Features:
  • Manages movie data array
  • Renders title and movie grid
  • Maps over movies and passes props to MovieItem components

MovieItem Component

• Purpose: Reusable component for displaying individual movies
• Props:
  • title: string - Movie title
  • year: number - Release year
  • image: string - Movie poster image URL
• Features:
  • Clean card layout
  • Hover effects
  • Responsive design

💡 Key Learning Points

1. Component Reusability: The MovieItem component is used multiple times with different data
2. Props Interface: TypeScript interface defines the expected props structure
3. Data Flow: Parent component (App) passes data down to child components (MovieItem)
4. Separation of Concerns: Styling, data, and presentation logic are properly separated

🚀 Getting Started

1. Install dependencies:

   npm install

2. Start the development server:

   npm run dev

3. Open your browser and visit the local development URL

🎨 Styling

The project uses modern CSS with:

• CSS Grid for responsive layout
• Clean typography and spacing
• Subtle hover animations
• Mobile-friendly design

📚 Technologies Used

• React - UI library
• TypeScript - Type safety
• Vite - Build tool
• CSS - Styling

---

This is a learning project focused on demonstrating React component and props fundamentals.