20.500.12556/RUL-168150 Full-stack development of React Online Marketplace Celostni razvoj React spletnega oglasnika Within the scope of this thesis, we designed and implemented an online marketplace utilizing modern web technologies. We utilized Next.js, a React framework that enabled us to leverage Server-Side Rendering for improved SEO and performance optimization. The user interface was designed to be responsive and user-friendly through a design system built with React Aria Components, ensuring accessibility for a diverse user base. For the backend, we used Supabase, which provided storage and a PostgreSQL database, also enabling real-time functionality through WebSockets, allowing us to integrate a real-time chat feature within our app. Additionally, we enhanced search capabilities by incorporating OpenAI's model for generating vector embeddings, which enabled semantic search on listings, and utilized the Google Places API for geolocation filtering, improving the relevance of search results. To evaluate our solution, we conducted a user study comparing our app with Bolha, an existing online marketplace, involving 20 testers. The results indicated that our app is more user-friendly and provided actionable feedback for further improvements. We also addressed methodological limitations, specifically the quantitative nature of the data and the small sample size, by using Google's Lighthouse to obtain objective performance, SEO, best practices, and accessibility metrics. Our app consistently scored highly in these audits, often achieving higher or comparable performance scores to Bolha across both mobile and desktop modes. V okviru diplomskega dela smo zasnovali in implementirali spletni oglasnik z uporabo sodobnih spletnih tehnologij. Za razvoj čelnega dela aplikacije smo uporabili React ogrodje Next.js, ki nam je omogočilo renderiranje na strežniku za izboljšanje SEO in zmogljivosti. Na zalednem delu aplikacije smo uporabili Supabase in njegove storitve, predvsem podatkovno bazo PostgreSQL, podatkovno shrambo ter mehanizem posodobitev v realnem času prek povezav WebSocket, ki smo jih izkoristili pri implementaciji klepeta v živo. Vključili smo tudi model OpenAI za generiranje vektorskih vložitev, kar je omogočilo semantično iskanje oglasov. Za izboljšanje relevantnosti iskalnih rezultatov smo dodatno integrirali Google Places API, ki omogoča filtriranje glede na lokacijo. Za namene testiranja naše aplikacije smo izvedli spletno anketo, v kateri je 20 testnih uporabnikov ocenilo svojo izkušnjo z uporabo naše aplikacije in obstoječega spletnega oglasnika Bolha. Rezultati kažejo, da je naša aplikacija uporabniku prijaznejša, poleg tega pa smo prejeli dodatne povratne informacije za nadaljnje izboljšave. Omenili smo tudi omejitve v naši metodologiji, predvsem majhno velikost vzorca in dejstvo, da smo pridobili zgolj kvalitativne podatke. Za pridobitev objektivnejših metrik smo izvedli vrsto testov z orodjem Google Lighthouse, s katerim smo preverili performančnost naše aplikacije in Bolhe ter analizirali druge metrike, kot so SEO in spletna dostopnost. Naša aplikacija je v večini primerov na mobilnih in namiznih napravah dosegala enake ali višje ocene v primerjavi z Bolho. online marketplace web app React spletni oglaševalnik spletna aplikacija React true false false Angleški jezik Slovenski jezik Diplomsko delo/naloga 2025-03-31 11:20:04 2025-03-31 11:20:10 2025-04-16 08:42:22 0000-00-00 00:00:00 2025 0 0 0000-00-00 NiDoloceno NiDoloceno NiDoloceno 0000-00-00 0000-00-00 0000-00-00 37631 232910595 Jovanovic_Dorde_-_Celostni_razvoj_React_spletnega_oglasnika.pdf Jovanovic_Dorde_-_Celostni_razvoj_React_spletnega_oglasnika.pdf 1 088C9C9E925ABCE7D87E8A772E159038 6197d860fa5d074fc7170d5397c85240b238f7682b0599c34b5904b11e066508 50fac752-0e10-11f0-b232-0050569b8976 https://repozitorij.uni-lj.si/Dokument.php?lang=slv&id=201209 Fakulteta za računalništvo in informatiko 0 0 0