Full-stack development of React Online Marketplace

JOVANOVIĆ, ĐORĐE (author), Machidon, Octavian Mihai (mentor)

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.

• Language: English
• Keywords: online marketplace, web app, React
• Work type: Bachelor thesis/paper
• Typology: 2.11 - Undergraduate Thesis
• Organization: FRI - Faculty of Computer and Information Science
• Year: 2025
• PID: 20.500.12556/RUL-168150
• COBISS.SI-ID: 232910595
• Publication date in RUL: 31.03.2025

Secondary language

• Language: Slovenian
• Title: Celostni razvoj React spletnega oglasnika

Abstract

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.

• Keywords: spletni oglaševalnik, spletna aplikacija, React