43 - Random Movie/Book Recommender

Description

Create a React component that suggests movies or books to users based on random selection or user preferences.

• Display a list of recommended movies or books with titles, genres, and potentially ratings.

• Offer a way for users to filter recommendations based on genre preferences.

• Allow users to save favorites for later viewing or reading.

• Optionally, integrate with external APIs to fetch movie or book data.

Algorithm

1. Create a React component with state to manage the list of recommendations, user preferences, and saved favorites.

2. Fetch movie or book data from a local dataset or external API (if applicable).

3. Implement a function to generate random recommendations based on available data.

4. Develop a filtering mechanism to refine recommendations based on user-selected genres.

5. Allow users to save and manage favorites within local storage or a database.

6. Render the recommendations list, filtering options, and saved favorites section.

Code

import React, { useState } from 'react';

const movies = [
  { title: 'The Shawshank Redemption', genre: 'Drama', rating: 9.3 },
  { title: 'The Godfather', genre: 'Crime', rating: 9.2 },
  { title: 'The Dark Knight', genre: 'Action, Crime', rating: 9.0 },
  // ... Add more movies with diverse genres and ratings
];

const books = [
  // ... Add books with titles, genres, and ratings
];

const RandomRecommender = () => {
  const [selectedGenre, setSelectedGenre] = useState(''); // User's chosen genre
  const [currentRecommendation, setCurrentRecommendation] = useState(null); // Current movie/book
  const [savedFavorites, setSavedFavorites] = useState([]); // Array of saved IDs

  const getRandomRecommendation = (genre) => {
    // Filter movies/books based on genre (if present)
    const filteredData = genre ? movies.filter((item) => item.genre.includes(genre)) : movies;
    // Randomly select an item from the filtered data
    const randomIndex = Math.floor(Math.random() * filteredData.length);
    setCurrentRecommendation(filteredData[randomIndex]);
  };

  const handleGenreChange = (e) => {
    setSelectedGenre(e.target.value);
  };

  const handleSaveFavorite = () => {
    if (!savedFavorites.includes(currentRecommendation.id)) {
      setSavedFavorites([...savedFavorites, currentRecommendation.id]);
    }
  };

  return (
    <div className="random-recommender">
      <h1>Ready for your next adventure?</h1>
      <p>Choose a genre or let us surprise you:</p>
      <select value={selectedGenre} onChange={handleGenreChange}>
        <option value="">All Genres</option>
        {/* Add options for various genres */}
      </select>
      <button onClick={() => getRandomRecommendation(selectedGenre)}>Recommend Something!</button>
      {currentRecommendation && (
        <div className="recommended-item">
          <h2>{currentRecommendation.title}</h2>
          <p>Genre: {currentRecommendation.genre}</p>
          <p>Rating: {currentRecommendation.rating}</p>
          <button onClick={handleSaveFavorite}>Save to Favorites</button>
        </div>
      )}
      {savedFavorites.length > 0 && (
        <div className="saved-favorites">
          <h2>Saved Favorites</h2>
          {/* Display saved items or implement navigation to a dedicated favorites page */}
        </div>
      )}
    </div>
  );
};

export default RandomRecommender;

Explanation

• This component manages lists of movies and books with titles, genres, and ratings in your code. You can replace this with your preferred data source, like an API call.

• useState hooks manage user-selected genre, current recommendation, and saved favorites.

• getRandomRecommendation generates a random recommendation based on selected genre or all data.

• User interaction handles genre selection and favorite saving functionalities.

• The UI displays recommendation based on selected genre, and allows saving it.

• A saved favorites section is rendered conditionally.

Additional Notes

• Implementing data fetching from an external API (e.g., TMDB, Open Library).

• Integrating ratings and reviews from the API data.

• Adding sorting options for recommendations by rating, release date, etc.

• Implementing a personalized recommendation algorithm based on user history or ratings.

• Enabling social sharing of recommendations to Facebook, Twitter, etc.