Upload 21 files

.env.local

@@ -0,0 +1 @@
+GEMINI_API_KEY=PLACEHOLDER_API_KEY

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

App.tsx

@@ -0,0 +1,149 @@
+import React, { useState, useCallback } from 'react';
+import { MediaType, Recommendation } from './types';
+import { GENRES } from './constants';
+import { fetchTitles, fetchRecommendations } from './services/geminiService';
+import MediaTypeSelector from './components/MediaTypeSelector';
+import GenreSelector from './components/GenreSelector';
+import TitleSelector from './components/TitleSelector';
+import RecommendationsDisplay from './components/RecommendationsDisplay';
+import LoadingSpinner from './components/shared/LoadingSpinner';
+import StepIndicator from './components/StepIndicator';
+
+const App: React.FC = () => {
+  const [step, setStep] = useState(1);
+  const [mediaType, setMediaType] = useState<MediaType | null>(null);
+  const [selectedGenres, setSelectedGenres] = useState<string[]>([]);
+  const [suggestedTitles, setSuggestedTitles] = useState<string[]>([]);
+  const [recommendations, setRecommendations] = useState<Recommendation[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isGamePassOnly, setIsGamePassOnly] = useState(false);
+  const [isMultiplayerOnly, setIsMultiplayerOnly] = useState(false);
+
+  const handleReset = useCallback(() => {
+    setStep(1);
+    setMediaType(null);
+    setSelectedGenres([]);
+    setSuggestedTitles([]);
+    setRecommendations([]);
+    setIsLoading(false);
+    setError(null);
+    setIsGamePassOnly(false);
+    setIsMultiplayerOnly(false);
+  }, []);
+
+  const handleBack = useCallback(() => {
+    if (step > 1) {
+      setError(null);
+      setStep(prev => prev - 1);
+    }
+  }, [step]);
+
+  const handleSelectMediaType = useCallback((type: MediaType) => {
+    setMediaType(type);
+    if (type !== MediaType.VideoGames) {
+        setIsGamePassOnly(false);
+        setIsMultiplayerOnly(false);
+    }
+    setStep(2);
+  }, []);
+
+  const handleSelectGenres = useCallback(async (genres: string[]) => {
+    if (!mediaType) return;
+    setSelectedGenres(genres);
+    setStep(3);
+    setIsLoading(true);
+    setError(null);
+    try {
+      const titles = await fetchTitles(mediaType, genres, mediaType === MediaType.VideoGames ? isGamePassOnly : undefined, mediaType === MediaType.VideoGames ? isMultiplayerOnly : undefined);
+      setSuggestedTitles(titles);
+    } catch (err) {
+      console.error(err);
+      setError('Could not fetch title suggestions. Please go back and try again.');
+      setStep(2);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [mediaType, isGamePassOnly, isMultiplayerOnly]);
+
+  const handleSelectTitles = useCallback(async (titles: string[]) => {
+    if (!mediaType) return;
+    setStep(4);
+    setIsLoading(true);
+    setError(null);
+    try {
+      const recs = await fetchRecommendations(mediaType, titles, mediaType === MediaType.VideoGames ? isGamePassOnly : undefined, mediaType === MediaType.VideoGames ? isMultiplayerOnly : undefined);
+      setRecommendations(recs);
+    } catch (err) {
+      console.error(err);
+      setError('Could not fetch recommendations. Please go back and try again.');
+      setStep(3);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [mediaType, isGamePassOnly, isMultiplayerOnly]);
+
+  const renderStep = () => {
+    if (isLoading && step > 2) {
+      return (
+        <div className="flex flex-col items-center justify-center h-64">
+          <LoadingSpinner />
+          <p className="mt-4 text-cyan-400">AI is thinking...</p>
+        </div>
+      );
+    }
+
+    switch (step) {
+      case 1:
+        return <MediaTypeSelector onSelect={handleSelectMediaType} />;
+      case 2:
+        return mediaType ? <GenreSelector 
+            mediaType={mediaType} 
+            genres={GENRES[mediaType]} 
+            onNext={handleSelectGenres} 
+            onBack={handleBack}
+            isGamePassOnly={isGamePassOnly}
+            onGamePassToggle={setIsGamePassOnly}
+            isMultiplayerOnly={isMultiplayerOnly}
+            onMultiplayerToggle={setIsMultiplayerOnly}
+             /> : null;
+      case 3:
+        return <TitleSelector titles={suggestedTitles} onNext={handleSelectTitles} onBack={handleBack} />;
+      case 4:
+        return <RecommendationsDisplay recommendations={recommendations} onReset={handleReset} />;
+      default:
+        return null;
+    }
+  };
+  
+  return (
+    <div className="min-h-screen bg-slate-900 flex flex-col items-center p-4 sm:p-6 lg:p-8">
+      <div className="w-full max-w-4xl mx-auto">
+        <header className="text-center mb-8">
+            <h1 className="text-4xl sm:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-teal-500">
+                FlixFinder
+            </h1>
+            <p className="text-slate-400 mt-2">Your personal guide to movies, TV, and games.</p>
+        </header>
+        
+        <main className="bg-slate-800/50 rounded-xl shadow-2xl shadow-slate-950/50 p-6 sm:p-8 backdrop-blur-sm border border-slate-700">
+            <StepIndicator currentStep={step} totalSteps={4} />
+            {error && (
+              <div className="bg-red-900/50 border border-red-700 text-red-300 p-3 rounded-md mb-6 text-center">
+                {error}
+              </div>
+            )}
+            <div className="mt-6">
+                {renderStep()}
+            </div>
+        </main>
+
+        <footer className="text-center mt-8 text-slate-500 text-sm">
+            <p>Powered by Gemini API</p>
+        </footer>
+      </div>
+    </div>
+  );
+};
+
+export default App;

README.md

@@ -1,14 +1,20 @@
----
-title: FlixFinder
-emoji: 🌍
-colorFrom: green
-colorTo: purple
-sdk: gradio
-sdk_version: 5.44.1
-app_file: app.py
-pinned: false
-license: apache-2.0
-short_description: An AI-powered recommendation engine for films, TV shows, and
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+<div align="center">
+<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
+</div>
+
+# Run and deploy your AI Studio app
+
+This contains everything you need to run your app locally.
+
+View your app in AI Studio: https://ai.studio/apps/drive/1g4g1I4cYdhx_-QqsBmvgB0zH0Z3xSOse
+
+## Run Locally
+
+**Prerequisites:**  Node.js
+
+
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`

components/GenreSelector.tsx

@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import { MediaType } from '../types';
+import Button from './shared/Button';
+
+interface GenreSelectorProps {
+  mediaType: MediaType;
+  genres: string[];
+  onNext: (selectedGenres: string[]) => void;
+  onBack: () => void;
+  isGamePassOnly: boolean;
+  onGamePassToggle: (value: boolean) => void;
+  isMultiplayerOnly: boolean;
+  onMultiplayerToggle: (value: boolean) => void;
+}
+
+const GenreSelector: React.FC<GenreSelectorProps> = ({ 
+    mediaType, 
+    genres, 
+    onNext, 
+    onBack, 
+    isGamePassOnly, 
+    onGamePassToggle,
+    isMultiplayerOnly,
+    onMultiplayerToggle
+}) => {
+  const [selectedGenres, setSelectedGenres] = useState<Set<string>>(new Set());
+
+  const toggleGenre = (genre: string) => {
+    setSelectedGenres(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(genre)) {
+        newSet.delete(genre);
+      } else {
+        newSet.add(genre);
+      }
+      return newSet;
+    });
+  };
+
+  const handleNext = () => {
+    onNext(Array.from(selectedGenres));
+  };
+
+  return (
+    <div className="animate-fade-in">
+      <h2 className="text-2xl font-bold text-center mb-2 text-slate-200">Select Genres for {mediaType}</h2>
+      <p className="text-center text-slate-400 mb-6">Choose one or more genres you're interested in.</p>
+      
+      {mediaType === MediaType.VideoGames && (
+        <div className="flex flex-col items-center justify-center my-6 space-y-4 bg-slate-700/50 p-4 rounded-lg border border-slate-700">
+            <div className="flex items-center w-full">
+                <input
+                    type="checkbox"
+                    id="gamepass-toggle"
+                    className="h-5 w-5 rounded bg-slate-600 border-slate-500 text-cyan-500 focus:ring-cyan-500 cursor-pointer"
+                    checked={isGamePassOnly}
+                    onChange={(e) => onGamePassToggle(e.target.checked)}
+                />
+                <label htmlFor="gamepass-toggle" className="ml-3 text-slate-300 font-medium cursor-pointer select-none">
+                    Only find games available on Game Pass (PC & Console)
+                </label>
+            </div>
+            <div className="flex items-center w-full">
+                 <input
+                    type="checkbox"
+                    id="multiplayer-toggle"
+                    className="h-5 w-5 rounded bg-slate-600 border-slate-500 text-cyan-500 focus:ring-cyan-500 cursor-pointer"
+                    checked={isMultiplayerOnly}
+                    onChange={(e) => onMultiplayerToggle(e.target.checked)}
+                />
+                <label htmlFor="multiplayer-toggle" className="ml-3 text-slate-300 font-medium cursor-pointer select-none">
+                    Only find multiplayer games
+                </label>
+            </div>
+        </div>
+      )}
+
+      <div className="flex flex-wrap justify-center gap-3 mb-8">
+        {genres.map(genre => (
+          <button
+            key={genre}
+            onClick={() => toggleGenre(genre)}
+            className={`px-4 py-2 rounded-full text-sm font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-800 focus:ring-cyan-500 ${
+              selectedGenres.has(genre)
+                ? 'bg-cyan-500 text-white'
+                : 'bg-slate-700 hover:bg-slate-600 text-slate-300'
+            }`}
+          >
+            {genre}
+          </button>
+        ))}
+      </div>
+
+      <div className="flex justify-between items-center">
+        <Button onClick={onBack} variant="secondary">Back</Button>
+        <Button onClick={handleNext} disabled={selectedGenres.size === 0}>
+          Next: Find Titles
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default GenreSelector;

components/MediaTypeSelector.tsx

@@ -0,0 +1,56 @@
+
+import React from 'react';
+import { MediaType } from '../types';
+import Card from './shared/Card';
+
+interface MediaTypeSelectorProps {
+  onSelect: (type: MediaType) => void;
+}
+
+const MediaOption: React.FC<{ type: MediaType; icon: JSX.Element; onSelect: (type: MediaType) => void }> = ({ type, icon, onSelect }) => (
+    <Card
+        onClick={() => onSelect(type)}
+        className="cursor-pointer text-center transform transition-transform duration-300 hover:scale-105 hover:bg-slate-700/80 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 focus:ring-offset-slate-800"
+        isHoverable={true}
+    >
+        <div className="text-cyan-400 w-16 h-16 mx-auto mb-4">
+            {icon}
+        </div>
+        <h3 className="text-xl font-semibold text-slate-100">{type}</h3>
+    </Card>
+);
+
+const MovieIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5m-7.5-13.5h15M3.75 5.25h16.5M3.75 9.75h16.5M3.75 14.25h16.5M3.75 18.75h16.5" />
+  </svg>
+);
+
+const TvIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M6 20.25h12m-7.5-3.75v3.75m-3.75-3.75v3.75m-3.75-3.75h15a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5h-15a1.5 1.5 0 00-1.5 1.5v9a1.5 1.5 0 001.5 1.5z" />
+  </svg>
+);
+
+const GameIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z" />
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m-3.75-10.5h7.5" />
+    </svg>
+);
+
+
+const MediaTypeSelector: React.FC<MediaTypeSelectorProps> = ({ onSelect }) => {
+  return (
+    <div className="animate-fade-in">
+        <h2 className="text-2xl font-bold text-center mb-6 text-slate-200">What are you in the mood for?</h2>
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
+            <MediaOption type={MediaType.Movies} icon={<MovieIcon />} onSelect={onSelect} />
+            <MediaOption type={MediaType.TVShows} icon={<TvIcon />} onSelect={onSelect} />
+            <MediaOption type={MediaType.VideoGames} icon={<GameIcon />} onSelect={onSelect} />
+        </div>
+    </div>
+  );
+};
+
+export default MediaTypeSelector;

components/RecommendationsDisplay.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Recommendation } from '../types';
+import Button from './shared/Button';
+import Card from './shared/Card';
+
+interface RecommendationsDisplayProps {
+  recommendations: Recommendation[];
+  onReset: () => void;
+}
+
+const Rating: React.FC<{ value: number }> = ({ value }) => {
+  const color = value >= 8 ? 'text-green-400' : value >= 6 ? 'text-yellow-400' : 'text-red-400';
+  return (
+    <div className="flex items-center gap-1 font-bold">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={`w-5 h-5 ${color}`}>
+        <path fillRule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.007z" clipRule="evenodd" />
+      </svg>
+      <span className={`${color} text-lg`}>{value.toFixed(1)}</span>
+      <span className="text-slate-400 text-sm">/ 10</span>
+    </div>
+  );
+};
+
+const PlayerCountIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4">
+        <path d="M10 8a3 3 0 100-6 3 3 0 000 6zM3.465 14.493a1.23 1.23 0 00.41 1.412A9.957 9.957 0 0010 18c2.31 0 4.438-.784 6.131-2.095a1.23 1.23 0 00.41-1.412A9.992 9.992 0 0010 12c-2.31 0-4.438.784-6.131 2.095z" />
+    </svg>
+);
+
+const LivePlayerIcon = () => (
+    <svg viewBox="0 0 16 16" fill="currentColor" className="w-4 h-4 text-green-500">
+      <circle cx="8" cy="8" r="6" />
+    </svg>
+);
+
+const StreamingIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-5 h-5">
+        <path d="M6.25 3.75a2 2 0 00-2 2v8a2 2 0 002 2h7.5a2 2 0 002-2v-8a2 2 0 00-2-2h-7.5zm.75 2.5a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5z" />
+    </svg>
+);
+
+
+const RecommendationsDisplay: React.FC<RecommendationsDisplayProps> = ({ recommendations, onReset }) => {
+  return (
+    <div className="animate-fade-in">
+      <h2 className="text-2xl font-bold text-center mb-6 text-slate-200">Here are your recommendations!</h2>
+      
+      <div className="space-y-6 mb-8">
+        {recommendations.map((rec, index) => (
+          <Card key={index}>
+            <div className="flex flex-col sm:flex-row justify-between sm:items-start mb-2">
+              <h3 className="text-xl font-bold text-cyan-400 mb-2 sm:mb-0">{rec.title}</h3>
+              <div className="flex-shrink-0 sm:text-right">
+                  <Rating value={rec.rating} />
+                  {rec.playerCount !== undefined && (
+                      <div className="flex items-center sm:justify-end gap-1.5 mt-2 text-slate-400 text-sm">
+                          <PlayerCountIcon />
+                          <span className="font-medium text-slate-300">{rec.playerCount.toLocaleString()}</span>
+                          <span>peak players</span>
+                      </div>
+                  )}
+                  {rec.livePlayerCount !== undefined && (
+                      <div className="flex items-center sm:justify-end gap-1.5 mt-1 text-slate-400 text-sm">
+                          <LivePlayerIcon />
+                          <span className="font-medium text-green-400">{rec.livePlayerCount.toLocaleString()}</span>
+                          <span>live players</span>
+                      </div>
+                  )}
+              </div>
+            </div>
+            <div className="flex flex-wrap gap-2 my-3">
+              {rec.genres.map(genre => (
+                <span key={genre} className="px-2 py-1 bg-slate-700 text-slate-300 text-xs font-medium rounded-full">{genre}</span>
+              ))}
+            </div>
+            <p className="text-slate-300 text-sm">{rec.synopsis}</p>
+            {rec.streamingOn && rec.streamingOn.length > 0 && (
+                <div className="mt-4 pt-4 border-t border-slate-700/50">
+                    <div className="flex items-center gap-2 mb-2">
+                        <StreamingIcon />
+                        <h4 className="text-sm font-semibold text-slate-300">Available on:</h4>
+                    </div>
+                    <div className="flex flex-wrap gap-2">
+                        {rec.streamingOn.map(service => (
+                            <span key={service} className="px-2.5 py-1 bg-slate-600 text-slate-200 text-xs font-semibold rounded-md">{service}</span>
+                        ))}
+                    </div>
+                </div>
+            )}
+          </Card>
+        ))}
+      </div>
+
+      <div className="text-center">
+        <Button onClick={onReset} size="large">Start Over</Button>
+      </div>
+    </div>
+  );
+};
+
+export default RecommendationsDisplay;

components/StepIndicator.tsx

@@ -0,0 +1,36 @@
+
+import React from 'react';
+
+interface StepIndicatorProps {
+  currentStep: number;
+  totalSteps: number;
+}
+
+const StepIndicator: React.FC<StepIndicatorProps> = ({ currentStep, totalSteps }) => {
+    const getStepName = (step: number) => {
+        switch(step) {
+            case 1: return "Select Media Type";
+            case 2: return "Select Genres";
+            case 3: return "Choose Your Favorites";
+            case 4: return "Your Recommendations";
+            default: return "";
+        }
+    };
+    
+  return (
+    <div className="w-full mb-6">
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-sm font-medium text-cyan-400">{getStepName(currentStep)}</span>
+        <span className="text-sm text-slate-400">Step {currentStep} of {totalSteps}</span>
+      </div>
+      <div className="w-full bg-slate-700 rounded-full h-2">
+        <div
+          className="bg-cyan-500 h-2 rounded-full transition-all duration-500 ease-out"
+          style={{ width: `${(currentStep / totalSteps) * 100}%` }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default StepIndicator;

components/TitleSelector.tsx

@@ -0,0 +1,120 @@
+import React, { useState } from 'react';
+import Button from './shared/Button';
+import Card from './shared/Card';
+
+interface TitleSelectorProps {
+  titles: string[];
+  onNext: (selectedTitles: string[]) => void;
+  onBack: () => void;
+}
+
+const TitleSelector: React.FC<TitleSelectorProps> = ({ titles, onNext, onBack }) => {
+  const [selectedTitles, setSelectedTitles] = useState<Set<string>>(new Set());
+  const [userAddedTitles, setUserAddedTitles] = useState<Set<string>>(new Set());
+  const [inputValue, setInputValue] = useState('');
+
+  const toggleTitle = (title: string) => {
+    // A title from the suggested list cannot be a user-added title and vice-versa
+    if (userAddedTitles.has(title)) return;
+
+    setSelectedTitles(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(title)) {
+        newSet.delete(title);
+      } else {
+        newSet.add(title);
+      }
+      return newSet;
+    });
+  };
+
+  const handleAddTitle = (e: React.FormEvent) => {
+    e.preventDefault();
+    const newTitle = inputValue.trim();
+    if (newTitle) {
+      setUserAddedTitles(prev => new Set(prev).add(newTitle));
+      setSelectedTitles(prev => new Set(prev).add(newTitle));
+      setInputValue('');
+    }
+  };
+
+  const handleRemoveUserTitle = (title: string) => {
+    setUserAddedTitles(prev => {
+        const newSet = new Set(prev);
+        newSet.delete(title);
+        return newSet;
+    });
+    setSelectedTitles(prev => {
+        const newSet = new Set(prev);
+        newSet.delete(title);
+        return newSet;
+    });
+  };
+
+  const handleNext = () => {
+    onNext(Array.from(selectedTitles));
+  };
+  
+  return (
+    <div className="animate-fade-in">
+      <h2 className="text-2xl font-bold text-center mb-2 text-slate-200">Choose Your Favorites</h2>
+      <p className="text-center text-slate-400 mb-6">Select titles you've enjoyed, or add your own.</p>
+      
+      <form onSubmit={handleAddTitle} className="flex gap-2 mb-4">
+        <input
+            type="text"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            placeholder="Add a title we missed..."
+            className="flex-grow bg-slate-700 border border-slate-600 text-slate-200 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500"
+        />
+        <Button type="submit" disabled={!inputValue.trim()}>
+            Add
+        </Button>
+      </form>
+      
+      {userAddedTitles.size > 0 && (
+        <div className="mb-4 p-3 bg-slate-900/50 rounded-lg">
+            <h3 className="text-sm font-semibold text-slate-400 mb-2">Your added titles:</h3>
+            <div className="flex flex-wrap gap-2">
+                {Array.from(userAddedTitles).map(title => (
+                    <span key={title} className="flex items-center gap-2 bg-teal-600/50 text-teal-200 px-3 py-1 rounded-full text-sm font-medium">
+                        {title}
+                        <button onClick={() => handleRemoveUserTitle(title)} className="text-teal-200 hover:text-white focus:outline-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                            </svg>
+                        </button>
+                    </span>
+                ))}
+            </div>
+        </div>
+      )}
+
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 mb-8 max-h-80 overflow-y-auto p-2 bg-slate-900/50 rounded-lg">
+        {titles.map(title => (
+          <Card
+            key={title}
+            onClick={() => toggleTitle(title)}
+            className={`cursor-pointer h-full flex items-center justify-center p-3 text-center text-sm font-medium transition-all duration-200 ${
+              selectedTitles.has(title) && !userAddedTitles.has(title)
+                ? 'bg-cyan-600 border-cyan-400 ring-2 ring-cyan-400'
+                : 'bg-slate-700 hover:bg-slate-600 border-slate-600'
+            }`}
+          >
+            {title}
+          </Card>
+        ))}
+      </div>
+
+      <div className="flex justify-between items-center">
+        <Button onClick={onBack} variant="secondary">Back</Button>
+        <Button onClick={handleNext} disabled={selectedTitles.size === 0}>
+          Get Recommendations
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default TitleSelector;

components/shared/Button.tsx

@@ -0,0 +1,33 @@
+
+import React from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  variant?: 'primary' | 'secondary';
+  size?: 'normal' | 'large';
+}
+
+const Button: React.FC<ButtonProps> = ({ children, variant = 'primary', size = 'normal', className, ...props }) => {
+  const baseStyles = 'font-semibold rounded-md shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-800';
+  
+  const variantStyles = {
+    primary: 'bg-cyan-600 text-white hover:bg-cyan-500 focus:ring-cyan-500 disabled:bg-slate-600 disabled:text-slate-400 disabled:cursor-not-allowed',
+    secondary: 'bg-slate-700 text-slate-200 hover:bg-slate-600 focus:ring-slate-500',
+  };
+
+  const sizeStyles = {
+    normal: 'px-4 py-2 text-sm',
+    large: 'px-6 py-3 text-base',
+  };
+
+  return (
+    <button
+      className={`${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;

components/shared/Card.tsx

@@ -0,0 +1,23 @@
+
+import React from 'react';
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  className?: string;
+  isHoverable?: boolean;
+}
+
+const Card: React.FC<CardProps> = ({ children, className, isHoverable, ...props }) => {
+  const hoverStyles = isHoverable ? 'transition-all duration-300 hover:shadow-cyan-500/20 hover:border-slate-600' : '';
+  
+  return (
+    <div
+      className={`bg-slate-800/60 p-6 rounded-lg border border-slate-700 ${hoverStyles} ${className}`}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Card;

components/shared/LoadingSpinner.tsx

@@ -0,0 +1,31 @@
+
+import React from 'react';
+
+const LoadingSpinner: React.FC = () => {
+  return (
+    <div className="flex justify-center items-center">
+      <svg
+        className="animate-spin h-10 w-10 text-cyan-500"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          className="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          strokeWidth="4"
+        ></circle>
+        <path
+          className="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        ></path>
+      </svg>
+    </div>
+  );
+};
+
+export default LoadingSpinner;

constants.ts

@@ -0,0 +1,14 @@
+
+import { MediaType } from './types';
+
+export const GENRES: Record<MediaType, string[]> = {
+  [MediaType.Movies]: [
+    "Action", "Adventure", "Comedy", "Drama", "Fantasy", "Horror", "Mystery", "Romance", "Sci-Fi", "Thriller", "Animation", "Crime"
+  ],
+  [MediaType.TVShows]: [
+    "Animation", "Comedy", "Crime", "Documentary", "Drama", "Family", "Fantasy", "Reality", "Sci-Fi", "Thriller", "Mystery", "Action & Adventure"
+  ],
+  [MediaType.VideoGames]: [
+    "Action", "Adventure", "RPG", "Strategy", "Shooter", "Puzzle", "Sports", "Simulation", "Horror", "Platformer", "Fighting", "Stealth"
+  ],
+};

index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>FlixFinder</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    body {
+      font-family: 'Inter', sans-serif;
+    }
+  </style>
+<script type="importmap">
+{
+  "imports": {
+    "@google/genai": "https://aistudiocdn.com/@google/genai@^1.17.0",
+    "react-dom/": "https://aistudiocdn.com/react-dom@^19.1.1/",
+    "react/": "https://aistudiocdn.com/react@^19.1.1/",
+    "react": "https://aistudiocdn.com/react@^19.1.1"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+<body class="bg-slate-900 text-slate-100">
+  <div id="root"></div>
+  <script type="module" src="/index.tsx"></script>
+</body>
+</html>

index.tsx

@@ -0,0 +1,16 @@
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

metadata.json

@@ -0,0 +1,5 @@
+{
+  "name": "FlixFinder",
+  "description": "An AI-powered recommendation engine for films, TV shows, and video games. Select your preferred media type and genres, choose some titles you like, and get personalized suggestions.",
+  "requestFramePermissions": []
+}

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "flixfinder",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@google/genai": "^1.17.0",
+    "react-dom": "^19.1.1",
+    "react": "^19.1.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
+  }
+}

services/geminiService.ts

@@ -0,0 +1,147 @@
+// Fix: This file was previously placeholder text. It is now fully implemented
+// to provide the required services for fetching data from the Gemini API,
+// resolving all module-related errors.
+import { GoogleGenAI, Type } from "@google/genai";
+import { MediaType, Recommendation } from "../types";
+
+// Initialize the Google Gemini AI client.
+// The API key is sourced from the environment variables, as per guidelines.
+const ai = new GoogleGenAI({ apiKey: process.env.API_KEY! });
+
+/**
+ * Fetches a list of popular titles for a given media type and genres.
+ * @param mediaType - The type of media (Movies, TV Shows, Video Games).
+ * @param genres - An array of selected genres.
+ * @param isGamePassOnly - Optional flag for video games to filter by Game Pass availability.
+ * @param isMultiplayerOnly - Optional flag for video games to filter by multiplayer availability.
+ * @returns A promise that resolves to an array of title strings.
+ */
+export const fetchTitles = async (
+  mediaType: MediaType,
+  genres: string[],
+  isGamePassOnly?: boolean,
+  isMultiplayerOnly?: boolean
+): Promise<string[]> => {
+  const gamePassQuery = isGamePassOnly ? " that are available on PC or Console Game Pass" : "";
+  const multiplayerQuery = isMultiplayerOnly ? " multiplayer" : "";
+
+  const prompt = `
+    List 20 popular and highly-rated${multiplayerQuery} ${mediaType}${gamePassQuery} from the following genres: ${genres.join(', ')}.
+    Focus on a diverse mix of classic and recent titles.
+    Return ONLY a JSON array of strings, where each string is a title. Do not include any other text or explanation.
+  `;
+
+  try {
+    const response = await ai.models.generateContent({
+      model: 'gemini-2.5-flash',
+      contents: prompt,
+      config: {
+        responseMimeType: 'application/json',
+        responseSchema: {
+          type: Type.ARRAY,
+          items: {
+            type: Type.STRING,
+            description: "The title of the media.",
+          }
+        }
+      }
+    });
+
+    const jsonString = response.text.trim();
+    // The response is expected to be a JSON string array.
+    return JSON.parse(jsonString);
+  } catch (e) {
+    console.error("Error fetching titles from Gemini API:", e);
+    // Re-throw a more user-friendly error to be caught by the UI layer.
+    throw new Error("Failed to fetch title suggestions from the AI. Please try again.");
+  }
+};
+
+/**
+ * Fetches personalized recommendations based on user's favorite titles.
+ * @param mediaType - The type of media (Movies, TV Shows, Video Games).
+ * @param titles - An array of titles the user likes.
+ * @param isGamePassOnly - Optional flag for video games to filter by Game Pass availability.
+ * @param isMultiplayerOnly - Optional flag for video games to filter by multiplayer availability.
+ * @returns A promise that resolves to an array of Recommendation objects.
+ */
+export const fetchRecommendations = async (
+  mediaType: MediaType,
+  titles: string[],
+  isGamePassOnly?: boolean,
+  isMultiplayerOnly?: boolean,
+): Promise<Recommendation[]> => {
+
+  const gamePassQuery = isGamePassOnly ? " that are available on PC or Console Game Pass" : "";
+  const multiplayerQuery = isMultiplayerOnly ? " multiplayer" : "";
+  const isGames = mediaType === MediaType.VideoGames;
+  const isStreamable = mediaType === MediaType.Movies || mediaType === MediaType.TVShows;
+  
+  const playerCountDescription = isGames
+    ? "Include an estimated 'playerCount' for recent peak concurrent players and a 'livePlayerCount' for the current live players. These should both be numbers."
+    : "";
+  
+  const streamingDescription = isStreamable
+    ? "- streamingOn: A list of major streaming services where it's available (e.g., Netflix, Hulu, Disney+)."
+    : "";
+
+  // Base properties for the JSON schema for all media types.
+  const properties: { [key: string]: object } = {
+      title: { type: Type.STRING, description: 'The title of the recommended item.' },
+      synopsis: { type: Type.STRING, description: 'A brief, engaging synopsis (2-3 sentences).' },
+      genres: { type: Type.ARRAY, items: { type: Type.STRING }, description: 'A list of relevant genres.' },
+      rating: { type: Type.NUMBER, description: 'An estimated rating out of 10 (e.g., 8.5).' },
+  };
+  
+  // Add a game-specific property to the schema if the media type is Video Games.
+  if (isGames) {
+      properties.playerCount = { type: Type.NUMBER, description: 'Estimated recent peak concurrent player count.' };
+      properties.livePlayerCount = { type: Type.NUMBER, description: 'Estimated current live player count.' };
+  }
+
+  if (isStreamable) {
+      properties.streamingOn = { type: Type.ARRAY, items: { type: Type.STRING }, description: 'List of streaming services.' };
+  }
+
+  const prompt = `
+    Based on a user's enjoyment of the following ${mediaType}: ${titles.join(', ')}.
+    
+    Please recommend 5 other${multiplayerQuery} ${mediaType}${gamePassQuery} they might like.
+    
+    For each recommendation, provide the following details:
+    - title: The title of the recommendation.
+    - synopsis: A brief, 2-3 sentence summary.
+    - genres: A list of relevant genres.
+    - rating: An estimated critical and audience rating out of 10 (e.g., 8.5).
+    ${streamingDescription}
+    ${playerCountDescription}
+
+    Return ONLY a JSON array of objects matching the defined schema. Do not include any other text, markdown, or explanation.
+  `;
+
+  try {
+    const response = await ai.models.generateContent({
+      model: 'gemini-2.5-flash',
+      contents: prompt,
+      config: {
+        responseMimeType: 'application/json',
+        responseSchema: {
+          type: Type.ARRAY,
+          items: {
+            type: Type.OBJECT,
+            properties: properties,
+            required: ['title', 'synopsis', 'genres', 'rating']
+          }
+        }
+      }
+    });
+
+    const jsonString = response.text.trim();
+    // The response is expected to be a JSON string representing an array of Recommendation objects.
+    return JSON.parse(jsonString);
+  } catch (e) {
+    console.error("Error fetching recommendations from Gemini API:", e);
+    // Re-throw a more user-friendly error to be caught by the UI layer.
+    throw new Error("Failed to fetch recommendations from the AI. Please try again.");
+  }
+};

tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "types": [
+      "node"
+    ],
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

types.ts

@@ -0,0 +1,15 @@
+export enum MediaType {
+  Movies = "Movies",
+  TVShows = "TV Shows",
+  VideoGames = "Video Games",
+}
+
+export interface Recommendation {
+  title: string;
+  synopsis: string;
+  genres: string[];
+  rating: number;
+  playerCount?: number;
+  livePlayerCount?: number;
+  streamingOn?: string[];
+}

vite.config.ts

@@ -0,0 +1,17 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});