🎬 StreamFlix Assignment - Build Your Own Streaming Platform

📋 Assignment Overview

Using what you learned about React Lists & Keys, you'll build a streaming platform that displays movies and TV series. This assignment will test your understanding of:

• Rendering arrays of data with .map()
• Using proper keys for list items
• Handling empty states
• Working with API data

🎯 Requirements

Core Features (Must Have)

1. Two Main Pages/Tabs:
   • Movies page
   • TV Series page
2. Movie List Display:
   • Show popular movies from TMDB API
   • Display movie title, poster image, rating, and release date
   • Use proper keys for each movie item
   • Handle empty state when no movies are found
3. TV Series List Display:
   • Show popular TV series from TMDB API
   • Display series title, poster image, rating, and first air date
   • Use proper keys for each series item
   • Handle empty state when no series are found
4. Navigation:
   • Tab system to switch between Movies and TV Series
   • Clear indication of which tab is active

🔗 API Information

TMDB API Configuration

// Use this exact configuration
const TMDB_API_KEY = '2ca22f700bb9eff7e814bfbe16ba6831'
const BASE_URL = 'https://api.themoviedb.org/3'
const IMAGE_BASE_URL = 'https://image.tmdb.org/t/p/'
const POSTER_SIZE = 'w500'
const BACKDROP_SIZE = 'original'

API Endpoints to Use

// For popular movies
const moviesURL = `${BASE_URL}/movie/popular?api_key=${TMDB_API_KEY}&language=en-US&page=1`

// For popular TV series
const seriesURL = `${BASE_URL}/tv/popular?api_key=${TMDB_API_KEY}&language=en-US&page=1`

How to Build Image URLs

// For poster images
const posterURL = `${IMAGE_BASE_URL}${POSTER_SIZE}${movie.poster_path}`

// For backdrop images (optional)
const backdropURL = `${IMAGE_BASE_URL}${BACKDROP_SIZE}${movie.backdrop_path}`

📝 Step-by-Step Guide

Step 1: Set Up Your Component Structure

function StreamFlix() {
  const [activeTab, setActiveTab] = useState('movies');
  const [movies, setMovies] = useState([]);
  const [series, setSeries] = useState([]);
  const [loading, setLoading] = useState(true);
  
  // Your code here
}

Step 2: Create API Fetch Functions

// Function to fetch movies
const fetchMovies = async () => {
  try {
    const response = await fetch(moviesURL);
    const data = await response.json();
    setMovies(data.results || []);
  } catch (error) {
    console.error('Error fetching movies:', error);
    setMovies([]);
  }
};

// Function to fetch TV series
const fetchSeries = async () => {
  // Similar structure to fetchMovies
};

Step 3: Use useEffect to Load Data

useEffect(() => {
  const loadData = async () => {
    setLoading(true);
    await Promise.all([fetchMovies(), fetchSeries()]);
    setLoading(false);
  };
  loadData();
}, []);

Step 4: Render Lists with .map()

// Example for movies list
{movies.length === 0 ? (
  <p>No movies found</p>
) : (
  <div className="movies-grid">
    {movies.map(movie => (
      <div key={movie.id} className="movie-card">
        <img src={`${IMAGE_BASE_URL}${POSTER_SIZE}${movie.poster_path}`} alt={movie.title} />
        <h3>{movie.title}</h3>
        <p>⭐ {movie.vote_average}</p>
        <p>📅 {movie.release_date}</p>
      </div>
    ))}
  </div>
)}

🎨 Styling Guidelines

• Use CSS Grid or Flexbox for layout
• Make cards responsive
• Add hover effects on movie/series cards
• Style the tab navigation clearly
• Add loading states

🏆 Bonus Features (Optional)

If you finish early, try adding:

1. Search functionality - filter movies/series by title
2. Genre badges - show genres for each item
3. Detailed view - click on item to see more details
4. Rating system - visual star ratings
5. Responsive design - works on mobile devices

✅ Checklist Before Submission

• Movies page displays list of movies using .map()
• TV Series page displays list of series using .map()
• Each list item has proper key prop
• Empty states are handled gracefully
• Tab navigation works correctly
• Images load properly from TMDB
• Code is clean and well-commented
• No console errors or warnings

🚀 Important Notes

• Keys are crucial! Use movie.id or series.id as keys
• Handle loading states - show "Loading..." while fetching data
• Error handling - always use try/catch with API calls
• Empty states - show helpful messages when lists are empty
• Image fallbacks - handle cases where poster images might be missing

📚 What You're Practicing

This assignment reinforces:

• ✅ Array rendering with .map()
• ✅ Proper key usage
• ✅ Handling empty lists
• ✅ Working with API data
• ✅ State management with useState
• ✅ Side effects with useEffect

🎯 Success Criteria

Your assignment will be evaluated on:

1. Functionality - Does it work as expected?
2. Code Quality - Clean, readable code with proper React patterns
3. Lists & Keys - Correct implementation of what we learned today
4. User Experience - Intuitive navigation and good visual design
5. Error Handling - Graceful handling of edge cases

Good luck! Remember to apply everything you learned about lists and keys today. This is your chance to build something awesome! 🚀