Optimizacija
Zadatak

Projektni zadatak:

Cilj zadatka je napraviti Next.js stranicu za istraživanje TV serija koja korisniku omogućava:

  • pregled popularnih TV-serija
  • prikaz detalja serije, popis epizoda, glumce...
  • dodavanje i uklanjanje omiljenih serija

TV Maze API (https://www.tvmaze.com/api (opens in a new tab))

TVmaze nudi besplatan i detaljan API za TV serije​ - omogućuje dohvat bogatih informacija o televizijskim emisijama i serijama, uključujući detalje o serijama, epizodama, glumačkoj postavi, produkciji i rasporedima emitiranja​. Ključni entitet je Show (TV serija) koji obuhvaća polja kao što su id, name (naziv serije), genres (žanrovi), summary (sažetak radnje u HTML formatu), status (npr. Running/Ended), rating (prosječna ocjena), i još dosta drugih podataka.

Svaki "Show" također sadrži ugniježđeni objekt image s linkovima na slike (poster) u dvije rezolucije. Uz serije, API pruža i Episode entitet (epizode pojedine serije, sa svojom radnjom, sezonom, brojem epizode, datumom prikazivanja i opcionalno slikom), Cast/Crew entitete (osobe glumaca, likova, članova ekipe), te razne dodatne informacije. Entiteti su međusobno povezani : npr. svaka epizoda ima referencu na seriju kojem pripada, serija ima listu epizoda i glumaca, osoba ima listu serija u kojima glumi, itd. Ove veze omogućuju da se iz jednog početnog poziva (npr. dohvat serije) naknadno dohvaćaju povezani podaci (epizode, glumci) ili da se koriste ugrađeni parametri za embedanje (TVmaze podržava parametar embed za uključivanje npr. epizoda direktno uz seriju)​

Sve informacije vraćaju se u JSON formatu, pridržavajući se HAL principa (svaki objekt ima _links za navigaciju na povezane resurse).

TVmaze API je potpuno otvoren za javnu upotrebu bez potrebe za API ključem ili OAuth-om. Svi osnovni endpointi (pretraga, dohvat showa, epizoda, glumaca itd.) dostupni su bez autentifikacije​. To znači da se iz Next.js aplikacije može direktno slati GET zahtjeve na api.tvmaze.com domenu. Postoji rate limit koji dozvoljava maksimalno 20 zahtjeva svakih 10 sekundi po IP adresi​, što je dovoljno za većinu klasičnih primjera upotrebe.

Popis osnovnih funkcionalnosti:

  1. Početna stranica - prikaz 20-ak aktualnih serija po nekom kriteriju (najnovije, najbolje ocijenjene)
  2. Prikaz detalja – stranica sa prikazom detalja pojedine serije. Prikažite poster, naziv, žanrove, ocjenu, opis i ostale podatke po želji
  3. Izbornik sa osnovnim funkcijama - "back", prikaz epizoda serije, prikaz glumaca, favoriti, itd...
  4. Stranica sa prikazom epizoda odabrane serije - prikažite osnovne informacije o epizodama - klikom na epizodu prikazuje se više detalja
  5. Stranica sa prikazom glumaca - slično kao i prikaz epizoda, omogućite prikaz glumaca pojedine serije
  6. Route Handler - napravite svoju API rutu koja će omogućiti dodavanje serija u favorite, dohvat svih favorita i brisanje serije iz favorita (GET, POST, DELETE)
  7. FavoriteButton – implementirajte opciju dodavanje serije u favorite (možete i epizodu ili glumca)
  8. Prikaz favorita – grid s posterima svih spremljenih serija, mogućnost uklanjanja iz favorita
  9. SEO - pokušajte optimizirati stranicu i testirati performanse aplikacije
  10. loading.js i not-found.js - napravite stranice (globalne ili lokalne) za učitavanje i prikaz nepostojeće stranice
  11. Deploy na Vercel - pokušajte aplikaciju pokrenuti u produkcijskom okruženju kao što je Vercel

Moguće nadogradnje

  • Pretraga serija – input element za pretragu, prikaz rezultata u modalu ili na posebnoj stranici.
  • Infinite scroll na početnoj stranici ili opcija za učitavanje više serija
  • Filtriranje po žanrovima – checkbox lista u izborniku
  • NextAuth integracija – GitHub OAuth i spremanje favorita po korisniku u cookie
  • trajna pohrana

Kriterij ocjenjivanja projekta:

  • Osnovne funkcionalnost 70 %
  • Kvaliteta koda i struktura 10 %
  • UI/UX (Tailwind, CSS, responzivnost) 10 %
  • Dokumentacija (komentari, readme datoteka, dnevnik rada): 10 %
  • Dodatne funkcionalnosti: max 15 %
Last updated on April 27, 2025
Digitalna Dalmacija