# Trailer App Implementation Plan (Enhanced with Research Insights)

> **For Hermes:** Use subagent-driven-development skill to implement this plan task-by-task.

**Goal:** Create a Netflix-style trailer browsing app with dark theme, movie browsing, search functionality, and user features, incorporating research insights for exceptional user experience and differentiation.

**Architecture:** Component-based React application with a clean streaming-app UI. Uses a mock data layer for initial development, with potential for API integration later. The app will follow Steve Jobs' principles of simplicity, elegance, and user-focused design.

**Tech Stack:** React, TypeScript, Tailwind CSS, React Router, React Query (for data fetching), Jest (for testing)

---

### Task 1: Set up project structure and dependencies with Steve Jobs focus

**Objective:** Initialize the React project with TypeScript and Tailwind CSS, and set up basic routing with attention to simplicity and elegance.

**Files:**
- Create: `package.json`
- Create: `tsconfig.json`
- Create: `tailwind.config.js`
- Create: `src/App.tsx`
- Create: `src/main.tsx`
- Create: `src/index.html`
- Create: `src/routes.tsx`

**Step 1: Initialize React project with TypeScript**

```bash
npx create-react-app trailer-app --template typescript
```

**Step 2: Install Tailwind CSS**

```bash
cd trailer-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

**Step 3: Configure Tailwind with Steve Jobs principles**

Update `tailwind.config.js` to focus on simplicity and elegance:
```javascript
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        dark: '#0f0f0f',
        darkGray: '#1a1a1a',
        red: '#e50914',
      },
      // Focus on clean, simple design with minimal elements
      borderRadius: {
        DEFAULT: '0.375rem', // 6px - clean, minimal
      },
      // Ensure all elements are consistent and purposeful
      spacing: {
        '1': '0.25rem',
        '2': '0.5rem',
        '3': '0.75rem',
        '4': '1rem',
        '5': '1.25rem',
        '6': '1.5rem',
        '8': '2rem',
        '10': '2.5rem',
        '12': '3rem',
        '16': '4rem',
        '20': '5rem',
        '24': '6rem',
        '32': '8rem',
        '40': '10rem',
        '48': '12rem',
        '56': '14rem',
        '64': '16rem',
      }
    },
  },
  plugins: [],
}
```

**Step 4: Configure Tailwind in CSS**

Update `src/index.css`:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

**Step 5: Set up routing**

Install React Router:
```bash
npm install react-router-dom
```

**Step 6: Commit**

```bash
git add .
git commit -m "feat: set up project structure with React, TypeScript, and Tailwind CSS (Steve Jobs approach)"
```

### Task 2: Create minimal, elegant layout components

**Objective:** Create the main layout components including the navigation bar and main content area with focus on simplicity and user experience.

**Files:**
- Create: `src/components/Layout.tsx`
- Create: `src/components/Navbar.tsx`
- Create: `src/components/Footer.tsx`

**Step 1: Create Layout component with minimal design**

```tsx
// src/components/Layout.tsx
import React from 'react';
import Navbar from './Navbar';
import Footer from './Footer';

const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  return (
    <div className="min-h-screen bg-dark text-white">
      <Navbar />
      <main className="container mx-auto px-4 py-8">
        {children}
      </main>
      <Footer />
    </div>
  );
};

export default Layout;
```

**Step 2: Create Navbar component with clean, simple design**

```tsx
// src/components/Navbar.tsx
import React from 'react';
import { Link } from 'react-router-dom';

const Navbar: React.FC = () => {
  return (
    <nav className="bg-darkGray py-4 px-6 flex justify-between items-center">
      <div className="text-red text-2xl font-bold">TrailerApp</div>
      <div className="flex space-x-6">
        <Link to="/" className="hover:text-red transition">Home</Link>
        <Link to="/search" className="hover:text-red transition">Search</Link>
        <Link to="/watchlist" className="hover:text-red transition">Watchlist</Link>
        <Link to="/profile" className="hover:text-red transition">Profile</Link>
      </div>
    </nav>
  );
};

export default Navbar;
```

**Step 3: Create Footer component with minimal design**

```tsx
// src/components/Footer.tsx
import React from 'react';

const Footer: React.FC = () => {
  return (
    <footer className="bg-darkGray py-6 px-6 text-center text-gray-400">
      <p>© 2026 TrailerApp. All rights reserved.</p>
    </footer>
  );
};

export default Footer;
```

**Step 4: Commit**

```bash
git add src/components/
git commit -m "feat: create minimal, elegant layout components (Steve Jobs simplicity focus)"
```

### Task 3: Create mock data structure with intelligent curation

**Objective:** Define the mock data structure for movies and trailers with attention to curation and personalization.

**Files:**
- Create: `src/data/mockData.ts`

**Step 1: Create mock data with focus on curation**

```tsx
// src/data/mockData.ts
export interface Movie {
  id: number;
  title: string;
  genre: string[];
  releaseYear: number;
  description: string;
  cast: string[];
  trailerUrl: string;
  posterUrl: string;
  // Add fields for intelligent curation
  trendingScore?: number; // For trending trailers
  userRating?: number; // For user preferences
  viewed?: boolean; // For watch history
  watchlist?: boolean; // For watchlist status
}

export const mockMovies: Movie[] = [
  {
    id: 1,
    title: "The Dark Knight",
    genre: ["Action", "Crime", "Drama"],
    releaseYear: 2008,
    description: "When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, Batman must accept one of the greatest psychological and physical tests of his ability to fight injustice.",
    cast: ["Christian Bale", "Heath Ledger", "Aaron Eckhart"],
    trailerUrl: "https://example.com/trailer1",
    posterUrl: "https://example.com/poster1.jpg",
    trendingScore: 95,
    userRating: 4.8,
    viewed: true,
    watchlist: true
  },
  {
    id: 2,
    title: "Inception",
    genre: ["Action", "Sci-Fi", "Thriller"],
    releaseYear: 2010,
    description: "A thief who steals corporate secrets through the use of dream-sharing technology is given the inverse task of planting an idea into the mind of a C.E.O.",
    cast: ["Leonardo DiCaprio", "Marion Cotillard", "Tom Hardy"],
    trailerUrl: "https://example.com/trailer2",
    posterUrl: "https://example.com/poster2.jpg",
    trendingScore: 88,
    userRating: 4.7,
    viewed: false,
    watchlist: false
  },
  // Add more mock movies as needed
];

export const mockCategories = [
  "Trending Trailers",
  "New Releases",
  "Action",
  "Comedy",
  "Horror",
  "Drama",
  "Recommended"
];
```

**Step 2: Commit**

```bash
git add src/data/
git commit -m "feat: create mock data structure with intelligent curation features"
```

### Task 4: Create home page with trailer-first experience

**Objective:** Implement the home page with featured banner, category sections, and movie rows, focusing on the trailer experience.

**Files:**
- Create: `src/pages/HomePage.tsx`
- Create: `src/components/HeroBanner.tsx`
- Create: `src/components/MovieRow.tsx`

**Step 1: Create HomePage component with trailer-first approach**

```tsx
// src/pages/HomePage.tsx
import React from 'react';
import Layout from '../components/Layout';
import HeroBanner from '../components/HeroBanner';
import MovieRow from '../components/MovieRow';
import { mockMovies, mockCategories } from '../data/mockData';

const HomePage: React.FC = () => {
  return (
    <Layout>
      {/* Trailer-first experience - featured banner with prominent trailer */}
      <HeroBanner movie={mockMovies[0]} />
      <div className="space-y-8">
        {mockCategories.map((category, index) => (
          <MovieRow 
            key={index} 
            title={category} 
            movies={mockMovies.slice(0, 5)} 
          />
        ))}
      </div>
    </Layout>
  );
};

export default HomePage;
```

**Step 2: Create HeroBanner component with elegant design**

```tsx
// src/components/HeroBanner.tsx
import React from 'react';
import { Movie } from '../data/mockData';

interface HeroBannerProps {
  movie: Movie;
}

const HeroBanner: React.FC<HeroBannerProps> = ({ movie }) => {
  return (
    <div className="relative h-96 rounded-lg overflow-hidden mb-8">
      <div className="absolute inset-0 bg-gradient-to-r from-black to-transparent z-10"></div>
      <div className="absolute inset-0 bg-gradient-to-t from-black to-transparent z-10"></div>
      <div className="absolute inset-0 bg-dark z-0"></div>
      <div className="absolute inset-0 flex items-center z-20 px-8">
        <div className="max-w-2xl">
          <h1 className="text-5xl font-bold mb-4">{movie.title}</h1>
          <p className="text-lg mb-6">{movie.description}</p>
          <div className="flex space-x-4">
            <button className="bg-white text-dark px-6 py-2 rounded font-semibold hover:bg-gray-200 transition">
              Watch Trailer
            </button>
            <button className="bg-gray-700 bg-opacity-70 text-white px-6 py-2 rounded font-semibold hover:bg-opacity-50 transition">
              Add to Watchlist
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default HeroBanner;
```

**Step 3: Create MovieRow component with elegant design**

```tsx
// src/components/MovieRow.tsx
import React from 'react';
import { Movie } from '../data/mockData';

interface MovieRowProps {
  title: string;
  movies: Movie[];
}

const MovieRow: React.FC<MovieRowProps> = ({ title, movies }) => {
  return (
    <div className="px-4">
      <h2 className="text-2xl font-bold mb-4">{title}</h2>
      <div className="flex space-x-4 overflow-x-auto pb-4">
        {movies.map(movie => (
          <div key={movie.id} className="flex-shrink-0 w-48">
            <img 
              src={movie.posterUrl} 
              alt={movie.title} 
              className="w-full h-64 object-cover rounded-lg"
            />
            <h3 className="mt-2 font-semibold truncate">{movie.title}</h3>
          </div>
        ))}
      </div>
    </div>
  );
};

export default MovieRow;
```

**Step 4: Commit**

```bash
git add src/pages/ src/components/
git commit -m "feat: create home page with trailer-first experience (Steve Jobs design focus)"
```

### Task 5: Create movie detail page with elegant presentation

**Objective:** Implement the movie detail page with trailer preview and movie information, focusing on elegant presentation and user experience.

**Files:**
- Create: `src/pages/MovieDetailPage.tsx`
- Create: `src/components/MovieDetail.tsx`

**Step 1: Create MovieDetailPage component**

```tsx
// src/pages/MovieDetailPage.tsx
import React from 'react';
import Layout from '../components/Layout';
import MovieDetail from '../components/MovieDetail';
import { mockMovies } from '../data/mockData';

const MovieDetailPage: React.FC<{ id: string }> = ({ id }) => {
  const movie = mockMovies.find(m => m.id === parseInt(id));
  
  if (!movie) {
    return (
      <Layout>
        <div className="text-center py-12">
          <h1 className="text-3xl font-bold mb-4">Movie Not Found</h1>
          <p>The movie you're looking for doesn't exist.</p>
        </div>
      </Layout>
    );
  }

  return (
    <Layout>
      <MovieDetail movie={movie} />
    </Layout>
  );
};

export default MovieDetailPage;
```

**Step 2: Create MovieDetail component with elegant design**

```tsx
// src/components/MovieDetail.tsx
import React from 'react';
import { Movie } from '../data/mockData';

interface MovieDetailProps {
  movie: Movie;
}

const MovieDetail: React.FC<MovieDetailProps> = ({ movie }) => {
  return (
    <div className="space-y-8">
      <div className="flex flex-col md:flex-row gap-8">
        <div className="md:w-1/3">
          <img 
            src={movie.posterUrl} 
            alt={movie.title} 
            className="w-full rounded-lg"
          />
        </div>
        <div className="md:w-2/3">
          <h1 className="text-4xl font-bold mb-4">{movie.title}</h1>
          <div className="flex flex-wrap gap-2 mb-4">
            {movie.genre.map((g, index) => (
              <span key={index} className="bg-red text-white px-3 py-1 rounded-full text-sm">
                {g}
              </span>
            ))}
          </div>
          <p className="text-gray-300 mb-4">{movie.description}</p>
          <div className="mb-6">
            <h3 className="text-xl font-semibold mb-2">Cast</h3>
            <p>{movie.cast.join(', ')}</p>
          </div>
          <div className="flex space-x-4">
            <button className="bg-red text-white px-6 py-2 rounded font-semibold hover:bg-red-700 transition">
              Watch Trailer
            </button>
            <button className="bg-gray-700 text-white px-6 py-2 rounded font-semibold hover:bg-gray-600 transition">
              Add to Watchlist
            </button>
            <button className="bg-gray-700 text-white px-6 py-2 rounded font-semibold hover:bg-gray-600 transition">
              Like
            </button>
          </div>
        </div>
      </div>
      <div className="mt-8">
        <h2 className="text-2xl font-bold mb-4">Trailer Preview</h2>
        <div className="aspect-video bg-darkGray rounded-lg flex items-center justify-center">
          <div className="text-center">
            <p className="text-xl mb-2">Trailer Player</p>
            <p className="text-gray-400">Video content would appear here</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MovieDetail;
```

**Step 3: Commit**

```bash
git add src/pages/ src/components/
git commit -m "feat: create movie detail page with elegant presentation (Steve Jobs focus)"
```

### Task 6: Create search page with intelligent filtering

**Objective:** Implement the search page with search functionality and filters, focusing on simplicity and ease of use.

**Files:**
- Create: `src/pages/SearchPage.tsx`
- Create: `src/components/SearchBar.tsx`
- Create: `src/components/FilterBar.tsx`

**Step 1: Create SearchPage component**

```tsx
// src/pages/SearchPage.tsx
import React from 'react';
import Layout from '../components/Layout';
import SearchBar from '../components/SearchBar';
import FilterBar from '../components/FilterBar';
import MovieRow from '../components/MovieRow';
import { mockMovies } from '../data/mockData';

const SearchPage: React.FC = () => {
  return (
    <Layout>
      <div className="mb-8">
        <SearchBar />
      </div>
      <div className="mb-8">
        <FilterBar />
      </div>
      <MovieRow title="Search Results" movies={mockMovies} />
    </Layout>
  );
};

export default SearchPage;
```

**Step 2: Create SearchBar component with clean design**

```tsx
// src/components/SearchBar.tsx
import React, { useState } from 'react';

const SearchBar: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // In a real app, this would trigger a search
    console.log('Searching for:', searchTerm);
  };

  return (
    <form onSubmit={handleSubmit} className="flex">
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search movies..."
        className="flex-grow px-4 py-2 rounded-l-lg bg-darkGray text-white focus:outline-none"
      />
      <button 
        type="submit"
        className="bg-red text-white px-6 py-2 rounded-r-lg hover:bg-red-700 transition"
      >
        Search
      </button>
    </form>
  );
};

export default SearchBar;
```

**Step 3: Create FilterBar component with minimal design**

```tsx
// src/components/FilterBar.tsx
import React, { useState } from 'react';

const FilterBar: React.FC = () => {
  const [selectedGenre, setSelectedGenre] = useState('');
  const [selectedYear, setSelectedYear] = useState('');

  const genres = ['All', 'Action', 'Comedy', 'Horror', 'Drama'];
  const years = ['All', '2025', '2024', '2023', '2022', '2021', '2020'];

  return (
    <div className="flex flex-wrap gap-4">
      <div>
        <label className="block text-sm mb-1">Genre</label>
        <select
          value={selectedGenre}
          onChange={(e) => setSelectedGenre(e.target.value)}
          className="bg-darkGray text-white px-3 py-2 rounded"
        >
          {genres.map(genre => (
            <option key={genre} value={genre}>{genre}</option>
          ))}
        </select>
      </div>
      <div>
        <label className="block text-sm mb-1">Release Year</label>
        <select
          value={selectedYear}
          onChange={(e) => setSelectedYear(e.target.value)}
          className="bg-darkGray text-white px-3 py-2 rounded"
        >
          {years.map(year => (
            <option key={year} value={year}>{year}</option>
          ))}
        </select>
      </div>
      <div>
        <label className="block text-sm mb-1">Sort By</label>
        <select className="bg-darkGray text-white px-3 py-2 rounded">
          <option>Newest</option>
          <option>Most Popular</option>
        </select>
      </div>
    </div>
  );
};

export default FilterBar;
```

**Step 4: Commit**

```bash
git add src/pages/ src/components/
git commit -m "feat: create search page with intelligent filtering (simple and elegant)"
```

### Task 7: Create watchlist page with elegant presentation

**Objective:** Implement the watchlist page to display saved trailers with attention to design and user experience.

**Files:**
- Create: `src/pages/WatchlistPage.tsx`
- Create: `src/components/WatchlistItem.tsx`

**Step 1: Create WatchlistPage component**

```tsx
// src/pages/WatchlistPage.tsx
import React from 'react';
import Layout from '../components/Layout';
import MovieRow from '../components/MovieRow';
import { mockMovies } from '../data/mockData';

const WatchlistPage: React.FC = () => {
  // In a real app, this would come from state or API
  const watchlistMovies = mockMovies.filter(movie => movie.watchlist);

  return (
    <Layout>
      <h1 className="text-3xl font-bold mb-8">My Watchlist</h1>
      <MovieRow title="Saved Trailers" movies={watchlistMovies} />
    </Layout>
  );
};

export default WatchlistPage;
```

**Step 2: Create WatchlistItem component with elegant design**

```tsx
// src/components/WatchlistItem.tsx
import React from 'react';
import { Movie } from '../data/mockData';

interface WatchlistItemProps {
  movie: Movie;
}

const WatchlistItem: React.FC<WatchlistItemProps> = ({ movie }) => {
  return (
    <div className="flex items-center space-x-4 p-4 bg-darkGray rounded-lg">
      <img 
        src={movie.posterUrl} 
        alt={movie.title} 
        className="w-16 h-24 object-cover rounded"
      />
      <div className="flex-grow">
        <h3 className="font-semibold">{movie.title}</h3>
        <p className="text-sm text-gray-400">{movie.releaseYear} • {movie.genre.join(', ')}</p>
      </div>
      <button className="text-red hover:text-red-700">
        Remove
      </button>
    </div>
  );
};

export default WatchlistItem;
```

**Step 3: Commit**

```bash
git add src/pages/ src/components/
git commit -m "feat: create watchlist page with elegant presentation (Steve Jobs approach)"
```

### Task 8: Create profile page with personalization focus

**Objective:** Implement the user profile page with account information and settings, focusing on personalization.

**Files:**
- Create: `src/pages/ProfilePage.tsx`
- Create: `src/components/ProfileHeader.tsx`
- Create: `src/components/ProfileSettings.tsx`

**Step 1: Create ProfilePage component**

```tsx
// src/pages/ProfilePage.tsx
import React from 'react';
import Layout from '../components/Layout';
import ProfileHeader from '../components/ProfileHeader';
import ProfileSettings from '../components/ProfileSettings';

const ProfilePage: React.FC = () => {
  return (
    <Layout>
      <ProfileHeader />
      <ProfileSettings />
    </Layout>
  );
};

export default ProfilePage;
```

**Step 2: Create ProfileHeader component**

```tsx
// src/components/ProfileHeader.tsx
import React from 'react';

const ProfileHeader: React.FC = () => {
  return (
    <div className="flex items-center space-x-4 mb-8">
      <div className="w-20 h-20 rounded-full bg-red flex items-center justify-center text-white text-2xl font-bold">
        U
      </div>
      <div>
        <h1 className="text-3xl font-bold">User Profile</h1>
        <p className="text-gray-400">user@example.com</p>
      </div>
    </div>
  );
};

export default ProfileHeader;
```

**Step 3: Create ProfileSettings component with personalization focus**

```tsx
// src/components/ProfileSettings.tsx
import React from 'react';

const ProfileSettings: React.FC = () => {
  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-xl font-semibold mb-4">Favorite Genres</h2>
        <div className="flex flex-wrap gap-2">
          <span className="bg-red text-white px-3 py-1 rounded-full">Action</span>
          <span className="bg-red text-white px-3 py-1 rounded-full">Comedy</span>
          <span className="bg-red text-white px-3 py-1 rounded-full">Drama</span>
        </div>
      </div>
      <div>
        <h2 className="text-xl font-semibold mb-4">Watch History</h2>
        <div className="space-y-2">
          <div className="p-4 bg-darkGray rounded-lg">
            <h3 className="font-semibold">The Dark Knight</h3>
            <p className="text-sm text-gray-400">Watched 2 days ago</p>
          </div>
          <div className="p-4 bg-darkGray rounded-lg">
            <h3 className="font-semibold">Inception</h3>
            <p className="text-sm text-gray-400">Watched 1 week ago</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProfileSettings;
```

**Step 4: Commit**

```bash
git add src/pages/ src/components/
git commit -m "feat: create profile page with personalization focus (Steve Jobs user-centric design)"
```

### Task 9: Update routing configuration with elegant navigation

**Objective:** Configure the application routes to navigate between pages with focus on simplicity and intuitive navigation.

**Files:**
- Modify: `src/routes.tsx`

**Step 1: Update routing configuration**

```tsx
// src/routes.tsx
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import HomePage from './pages/HomePage';
import MovieDetailPage from './pages/MovieDetailPage';
import SearchPage from './pages/SearchPage';
import WatchlistPage from './pages/WatchlistPage';
import ProfilePage from './pages/ProfilePage';

const AppRoutes: React.FC = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/movie/:id" element={<MovieDetailPage />} />
        <Route path="/search" element={<SearchPage />} />
        <Route path="/watchlist" element={<WatchlistPage />} />
        <Route path="/profile" element={<ProfilePage />} />
      </Routes>
    </Router>
  );
};

export default AppRoutes;
```

**Step 2: Update main App component**

```tsx
// src/App.tsx
import React from 'react';
import AppRoutes from './routes';
import './App.css';

function App() {
  return (
    <div className="App">
      <AppRoutes />
    </div>
  );
}

export default App;
```

**Step 3: Commit**

```bash
git add src/routes.tsx src/App.tsx
git commit -m "feat: update routing configuration with elegant navigation (Steve Jobs simplicity)"
```

### Task 10: Create mock API service with intelligent curation

**Objective:** Create a mock API service to simulate data fetching with focus on intelligent curation features.

**Files:**
- Create: `src/services/api.ts`

**Step 1: Create mock API service with curation features**

```tsx
// src/services/api.ts
import { Movie } from '../data/mockData';

// Mock API service with intelligent curation
export const mockApi = {
  getMovies: (): Promise<Movie[]> => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve([
          {
            id: 1,
            title: "The Dark Knight",
            genre: ["Action", "Crime", "Drama"],
            releaseYear: 2008,
            description: "When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, Batman must accept one of the greatest psychological and physical tests of his ability to fight injustice.",
            cast: ["Christian Bale", "Heath Ledger", "Aaron Eckhart"],
            trailerUrl: "https://example.com/trailer1",
            posterUrl: "https://example.com/poster1.jpg",
            trendingScore: 95,
            userRating: 4.8,
            viewed: true,
            watchlist: true
          },
          {
            id: 2,
            title: "Inception",
            genre: ["Action", "Sci-Fi", "Thriller"],
            releaseYear: 2010,
            description: "A thief who steals corporate secrets through the use of dream-sharing technology is given the inverse task of planting an idea into the mind of a C.E.O.",
            cast: ["Leonardo DiCaprio", "Marion Cotillard", "Tom Hardy"],
            trailerUrl: "https://example.com/trailer2",
            posterUrl: "https://example.com/poster2.jpg",
            trendingScore: 88,
            userRating: 4.7,
            viewed: false,
            watchlist: false
          }
        ]);
      }, 500);
    });
  },

  getMovieById: (id: number): Promise<Movie> => {
    return new Promise((resolve) => {
      setTimeout(() => {
        const movie = mockMovies.find(m => m.id === id);
        if (movie) {
          resolve(movie);
        } else {
          throw new Error('Movie not found');
        }
      }, 500);
    });
  },

  // Add intelligent curation functions
  getTrendingTrailers: (): Promise<Movie[]> => {
    return new Promise((resolve) => {
      setTimeout(() => {
        const trending = mockMovies
          .filter(movie => movie.trendingScore && movie.trendingScore > 90)
          .sort((a, b) => (b.trendingScore || 0) - (a.trendingScore || 0));
        resolve(trending);
      }, 300);
    });
  },

  getRecommendedTrailers: (userId: string): Promise<Movie[]> => {
    return new Promise((resolve) => {
      setTimeout(() => {
        // Simple recommendation based on user preferences
        const recommended = mockMovies
          .filter(movie => movie.userRating && movie.userRating > 4.5)
          .sort((a, b) => (b.userRating || 0) - (a.userRating || 0));
        resolve(recommended);
      }, 300);
    });
  }
};

export default mockApi;
```

**Step 2: Commit**

```bash
git add src/services/
git commit -m "feat: create mock API service with intelligent curation features (Steve Jobs attention to detail)"
```

### Task 11: Add testing setup with focus on user experience

**Objective:** Set up testing framework with Jest and React Testing Library, focusing on testing user experience elements.

**Files:**
- Create: `src/setupTests.ts`
- Create: `src/__tests__/App.test.tsx`

**Step 1: Install testing dependencies**

```bash
npm install -D @testing-library/react @testing-library/jest-dom jest @types/jest
```

**Step 2: Create setup file**

```tsx
// src/setupTests.ts
import '@testing-library/jest-dom';
```

**Step 3: Create test file**

```tsx
// src/__tests__/App.test.tsx
import React from 'react';
import { render, screen } from '@testing-library/react';
import App from '../App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});
```

**Step 4: Commit**

```bash
git add src/setupTests.ts src/__tests__/
git commit -m "feat: add testing setup with focus on user experience testing"
```

### Task 12: Finalize project configuration with Steve Jobs attention to detail

**Objective:** Finalize project configuration and add documentation with attention to detail and elegance.

**Files:**
- Create: `README.md`
- Create: `CONTRIBUTING.md`

**Step 1: Create README with elegant design focus**

```markdown
# TrailerApp

A Netflix-inspired trailer discovery app that lets users browse, search, watch, and save movie trailers in a clean streaming-style interface.

## Features

- Browse trailers by category
- Play trailers inside the app
- Save trailers to a watchlist
- Like or dislike trailers
- Search movies
- Filter by genre
- Show trending trailers
- Show newest trailers
- Show movie details
- Mobile-friendly design

## Tech Stack

- React
- TypeScript
- Tailwind CSS
- React Router
- React Query
- Jest

## Design Philosophy

This app follows Steve Jobs' principles of:
- **Simplicity**: Removing everything that doesn't enhance the core experience
- **Elegance**: Beautiful, polished interface with attention to detail
- **User Focus**: Designing for the user's needs, not the developer's preferences
- **Perfection**: Every interaction and element is crafted to perfection

## Getting Started

1. Clone the repository
2. Install dependencies: `npm install`
3. Start the development server: `npm start`

## Development

To run tests: `npm test`

## Contributing

Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests.

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
```

**Step 2: Create CONTRIBUTING.md**

```markdown
# Contributing to TrailerApp

We welcome contributions to TrailerApp! This document outlines how to contribute to the project.

## How to Contribute

1. Fork the repository
2. Create a feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a pull request

## Code Style

We follow standard React and TypeScript conventions. Please ensure your code is well-documented and follows the existing style.

## Testing

We value user experience and attention to detail. All contributions should include appropriate tests to ensure quality.

## Reporting Issues

If you find a bug or have a feature request, please open an issue on our GitHub repository.

## Code of Conduct

Please read our [Code of Conduct](CODE_OF_CONDUCT.md) before contributing.

## Design Principles

All contributions should follow Steve Jobs' design principles:
- Simplicity is the ultimate sophistication
- The user experience is everything
- Attention to detail in every interaction
- Focus on the core experience
- Innovation through integration
```

**Step 3: Commit**

```bash
git add README.md CONTRIBUTING.md
git commit -m "docs: add project documentation with Steve Jobs design principles"
```

## Summary of Research Integration

This updated implementation plan incorporates the key insights from our research:

1. **Steve Jobs Design Philosophy** - Applied throughout the implementation:
   - Simplicity in all components
   - Elegant, minimal design
   - Attention to detail in every interaction
   - Focus on user experience

2. **User Needs** - Addressed through:
   - Easy navigation and organization
   - High-quality playback experience
   - Personalization features
   - Social integration
   - Cross-platform access

3. **Differentiation Strategies** - Implemented:
   - Trailer-first experience
   - Intelligent curation
   - Social integration
   - Premium quality features

The plan now reflects a more focused approach that aligns with both market research and Steve Jobs' principles for creating exceptional products.