# 43 - Random Movie/Book Recommender

### **Description**

Create a random movie/book recommender that displays a list of recommended movies or books with titles, genres, and ratings, offers a way for users to filter recommendations based on genre preferences, allows users to save favorites for later viewing or reading, and integrates with external APIs to fetch movie or book data.

### **Algorithm**

1. Create a React component for the recommender
2. Define the data structure for movies/books (title, genre, rating, etc.)
3. Use an external API (e.g. TMDB for movies, Goodreads for books) to fetch data
4. Create a function to generate random recommendations
5. Create a filter function to filter recommendations by genre
6. Create a favorite-saving function to save user favorites
7. Render the list of recommendations with filter and favorite options

### Classes

* `Recommender`: The main recommender component
* `Recommendation`: A single recommendation component (movie or book)
* `Filter`: The filter component for genre selection
* `Favorite`: The favorite component for saving favorites

### Code

Recommender.js

```javascript
import React, { useState, useEffect } from 'react';
import Recommendation from './Recommendation';
import Filter from './Filter';
import Favorite from './Favorite';

const Recommender = () => {
  const [recommendations, setRecommendations] = useState([]);
  const [genreFilter, setGenreFilter] = useState('');
  const [favorites, setFavorites] = useState([]);

  useEffect(() => {
    fetch('<url-to-fetch>')
      .then(response => response.json())
      .then(data => setRecommendations(data.results));
  }, []);

  const generateRandomRecommendations = () => {
    const randomRecommendations = [];
    for (let i = 0; i < 5; i++) {
      const randomIndex = Math.floor(Math.random() * recommendations.length);
      randomRecommendations.push(recommendations[randomIndex]);
    }
    return randomRecommendations;
  };

  const filterRecommendations = (genre) => {
    setGenreFilter(genre);
    const filteredRecommendations = recommendations.filter((recommendation) => recommendation.genre === genre);
    return filteredRecommendations;
  };

  const saveFavorite = (recommendation) => {
    setFavorites([...favorites, recommendation]);
  };

  return (
    <div>
      <Filter onFilterChange={filterRecommendations} />
      <ul>
        {generateRandomRecommendations().map((recommendation) => (
          <Recommendation
            key={recommendation.id}
            recommendation={recommendation}
            onSaveFavorite={saveFavorite}
          />
        ))}
      </ul>
      <Favorite favorites={favorites} />
    </div>
  );
};

export default Recommender;

```

Recommendation.js

```javascript
import React from 'react';

const Recommendation = ({ recommendation, onSaveFavorite }) => {
  return (
    <li>
      <h3>{recommendation.title}</h3>
      <p>{recommendation.genre}</p>
      <p>{recommendation.rating}</p>
      <button onClick={() => onSaveFavorite(recommendation)}>Save Favorite</button>
    </li>
  );
};

export default Recommendation;
```

Filter.js

```javascript
import React from 'react';

const Filter = ({ onFilterChange }) => {
  const [genre, setGenre] = useState('');

  const handleFilterChange = (event) => {
    setGenre(event.target.value);
    onFilterChange(genre);
  };

  return (
    <select value={genre} onChange={handleFilterChange}>
      <option value="">All Genres</option>
      <option value="action">Action</option>
      <option value="comedy">Comedy</option>
      <option value="drama">Drama</option>
    </select>
  );
};

export default Filter;
```

Favorite.js

```javascript
import React from 'react';

const Favorite = ({ favorites }) => {
  return (
    <ul>
      {favorites.map((favorite) => (
        <li key={favorite.id}>{favorite.title}</li>
      ))}
    </ul>
  );
};

export default Favorite;
```

### **Explanation**

The code creates a random movie/book recommender that displays a list of recommended movies or books with titles, genres, and ratings, offers a way for users to filter recommendations based on genre preferences, allows users to save favorites for later viewing or reading, and integrates with external APIs to fetch movie or book data. The component uses the useState hook to manage the recommendations, genre filter, and favorites.

### Possible Future Enhancements

* Add support for user authentication and personalized recommendations
* Add support for more advanced filtering options (e.g. rating, release date)
* Add support for movie/book reviews and ratings


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://choubey.gitbook.io/react-coding-puzzles/43-random-movie-book-recommender.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.