Mid Sweden University

This thesis project was carried out for the company Wine For Friends, with the objective of replacing their outdated website with a modern, responsive, and user-friendly solution. The new site was developed using a headless CMS architecture, combining WordPress for content management with a React based frontend. Communication between the systems is handled through REST API, with JWT implemented for secure authentication. To support ad ministrators with no coding experience, custom plugins and tailored post ty pes were developed in WordPress, enabling intuitive content management. The frontend was built using a modular component structure in React, styled with SASS, and bundled using Vite. Development took place in a local envi ronment using Visual Studio Code and XAMPP. The finished result is a technically robust, accessible, and maintainable website that meets the project’s performance and usability goals.

Detta examensarbete har utförts åt företaget Wine For Friends med målet att ersätta deras tidigare tekniskt och visuellt föråldrade webbplats med en modern, flexibel och lättadministrerad lösning. Projektet har genomförts med ett headless CMS-baserat arbetssätt där WordPress används som innehållshanteringssystem och React som frontendramverk. Kommunikation mellan backend och frontend sker via REST API, och JWT används för autentisering. För att förenkla hantering av innehåll förr administratörer utan teknisk bakgrund har skräddarsydda plugins och anpassade posttyper utvecklats i WordPress. Frontend-applikationen har byggts i React med komponentbaserad arkitektur, SASS för styling och Vite som byggverktyg. Utvecklingsmiljön har satts upp lokalt med Visual Studio Code och XAMPP. Webbplatsen har testats med verktyg som Google Lighthouse och WAVE för att säkerställa prestanda, tillgänglighet och responsivitet. Resultatet är en modern, tillgänglig och användarvänlig webbplats som uppfyller de tekniska och funktionella krav som ställts i projektet.