Web platforma za prikazivanje i dijeljenje video sadržaja

diplomski rad

• Naslov (engleski): Web Platform for Playing and Sharing Videos
• Autor: Daniel Ranogajec
• Mentor: Krešimir Križanović (mentor)
• Član povjerenstva: Krešimir Križanović (predsjednik povjerenstva)
• Član povjerenstva: Marko Subašić (član povjerenstva)
• Član povjerenstva: Boris Milašinović (član povjerenstva)
• Ustanova koja je dodijelila akademski / stručni stupanj: Sveučilište u Zagrebu; Fakultet elektrotehnike i računarstva; Zagreb
• Datum i država obrane: 2023-07-11, Hrvatska

Sažetak

U ovom diplomskom radu opisana je izrada web aplikacije imena PlayTube. Imple-
mentirana je koristeći Express.js za backend, MongoDB kao bazu podataka i React.js
za frontends. Za postizanje responzivnog dizajna te omogućavanje korištenja na razli-
čitim ured̄ajima korišten je Bootstrap.
Arhitektura aplikacije temelji se na MVC modelu koji omogućuje jasnu odvojenost
logike poslovanja, korisničkog sučelja i podataka. Implementirane su funkcionalnosti
poput listi izvod̄enja, pregledavanje videozapisa iz lista, dodavanje prijatelja i korište-
nje višekorisničkih soba. Za implementiranje soba korišten je WebSocket protokol,
koji je omogućio dvosmjernu komunikaciju izmed̄u klijenata i poslužitelja.
Izrad̄ena web aplikacija pruža korisnicima intuitivno sučelje za pregledavanje, orga-
niziranje i dijeljenje njihovih omiljenih videozapisa. Korištenje WebSocket protokola
omogućuje stvaranje interaktivnih višekorisničkih soba gdje korisnici mogu istovre-
meno gledati videozapise te dodavati i ocjenjivati iste u stvarnom vremenu. Integracija
sa sustavima Google i Facebook korisnicima olakšava kreiranje računa i omogućuje
im brzo povezivanje sa njihovim postojećim profilima.
PlayTube predstavlja modernu i skalabilnu platformu koja zadovoljava zahtjeve suvre-
menih korisnika te im omogućuje bogato iskustvo pregledavanja videozapisa.

Sažetak (engleski)

In this master’s thesis, the development of a web application named PlayTube is descri-
bed. It was implemented using Express.js for the backend, MongoDB as the database,
and React.js for the frontend. Bootstrap was used to achieve a responsive design and
to enable usage on different devices.
The architecture of the application is based on the MVC model, which allows clear
separation of business logic, user interface, and data. Functionalities such as playlists,
viewing videos from playlists, adding friends, and using multi-user rooms were im-
plemented. The WebSocket protocol was used for implementing the rooms, enabling
bidirectional communication between clients and the server.
The developed web application provides users with an intuitive interface for browsing,
organizing, and sharing their favorite videos. The use of the WebSocket protocol al-
lows the creation of interactive multi-user rooms where users can simultaneously watch
videos and also add and rate them in real-time. Integration with Google and Facebook
systems makes it easier for users to create accounts and enables quick connection with
their existing profiles.
PlayTube represents a modern and scalable platform that meets the demands of con-
temporary users, providing them with a rich video browsing experience.

• Ključne riječi: Web aplikacija; PlayTube; React.js; MongoDB; Express.js; Bootstrap; WebSocket; Responzivni dizajn; MVC model; Videozapisi; Liste izvod̄enja; Sobe
• Ključne riječi (engleski): Web application; PlayTube; React.js; MongoDB; Express.js; Bootstrap; WebSocket; Responsive design; MVC model; Videos; Playlists; Rooms
• Jezik: hrvatski
• URN:NBN: urn:nbn:hr:168:046745
• Studijski program: Naziv: Računarstvo; Vrsta studija: sveučilišni; Stupanj studija: diplomski; Akademski / stručni naziv: magistar/magistra inženjer/inženjerka računarstva (mag.ing.comp.)
• Vrsta resursa: Tekst
• Način izrade datoteke: Izvorno digitalna
• Prava pristupa: Zatvoreni pristup
• Datum i vrijeme pohrane: 2023-10-11 10:18:50