Web platforma za prikazivanje i dijeljenje video sadržaja

master's thesis

• Title (english): Web Platform for Playing and Sharing Videos
• Author: Daniel Ranogajec
• Mentor: Krešimir Križanović (mentor)
• Committee member: Krešimir Križanović (predsjednik povjerenstva)
• Committee member: Marko Subašić (član povjerenstva)
• Committee member: Boris Milašinović (član povjerenstva)
• Granter: University of Zagreb; Faculty of Electrical Engineering and Computing; Zagreb
• Defense date and country: 2023-07-11, Croatia

Abstract

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.

Abstract (english)

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.

• Keywords: Web aplikacija; PlayTube; React.js; MongoDB; Express.js; Bootstrap; WebSocket; Responzivni dizajn; MVC model; Videozapisi; Liste izvod̄enja; Sobe
• Keywords (english): Web application; PlayTube; React.js; MongoDB; Express.js; Bootstrap; WebSocket; Responsive design; MVC model; Videos; Playlists; Rooms
• Language: croatian
• URN:NBN: urn:nbn:hr:168:046745
• Study programme: Title: Computing; Study programme type: university; Study level: graduate; Academic / professional title: magistar/magistra inženjer/inženjerka računarstva (magistar/magistra inženjer/inženjerka računarstva)
• Type of resource: Text
• File origin: Born digital
• Access conditions: Closed access
• Created on: 2023-10-11 10:18:50