This content is not available in your language yet.
Zbudujesz aplikację do zarządzania własną kolekcją filmów i seriali — watchlista, oceny, kategorie i integracja z OMDB API do pobierania danych o filmach.
Czego się nauczycie?
Wyszukiwanie filmów — po tytule przez OMDB API lub lokalne dane
Dodawanie do kolekcji — ze statusem (do obejrzenia / obejrzane)
Ocenianie — gwiazdki 1-5 po obejrzeniu
Filtrowanie — po statusie, gatunku, roku, ocenie
Widok szczegółów — plakat, obsada, reżyser, opis, ocena IMDb
{ "movies": [ { "imdbId": "tt0111161", "title": "The Shawshank Redemption", "year": "1994", "genre": "Drama", "director": "Frank Darabont", "plot": "Two imprisoned men bond over a number of years...", "poster": "https://m.media-amazon.com/images/...", "imdbRating": "9.3", "status": "watched", "userRating": 5, "dateAdded": "2025-03-01", "notes": "Najlepszy film jaki widziałem" } ]}useMovieCollectionconst OMDB_KEY = import.meta.env.VITE_OMDB_API_KEY;
async function searchMovies(query) { const res = await fetch(`https://www.omdbapi.com/?s=${query}&apikey=${OMDB_KEY}`); const data = await res.json(); if (data.Response === 'False') throw new Error(data.Error); return data.Search;}
async function getMovieDetail(imdbId) { const res = await fetch(`https://www.omdbapi.com/?i=${imdbId}&apikey=${OMDB_KEY}`); return res.json();}function StarRating({ rating, onRate, readonly = false }) { const [hovered, setHovered] = useState(0);
return ( <div className="stars"> {[1, 2, 3, 4, 5].map((star) => ( <span key={star} className={`star ${star <= (hovered || rating) ? 'filled' : ''}`} onMouseEnter={() => !readonly && setHovered(star)} onMouseLeave={() => !readonly && setHovered(0)} onClick={() => !readonly && onRate(star)} role={readonly ? undefined : 'button'} > ★ </span> ))} </div> );}Powodzenia!
Filmoteka to projekt, który sami będziecie chcieli używać na co dzień! Interaktywne gwiazdki i filtrowanie kolekcji to dwa elementy, które robią duże wrażenie wizualne. Zacznijcie od lokalnych danych z 20 filmami — nie marnujcie limitu OMDB API podczas developmentu!