Valokuvaajan verkkosivuston modernisointi ja sisällönhallinnan kehittäminen

Abstract

Opinnäytetyön tavoitteena oli modernisoida valokuvausportfoliona toimiva verkkosivusto hyödyntäen nykyaikaisia full stack -kehityksen menetelmiä. Työn lopputuloksena toteutettiin web-sovellus, joka tukee myös sisällönhallintaa. Tavoitteena oli samalla parantaa sivuston käytettävyyttä, saavutettavuutta ja ylläpidettävyyttä.

Työ toteutettiin toiminnallisena kehitysprojektina, jossa sovelluksen vanha versio rakennettiin uudelleen hyödyntäen React-, Node.js- ja TypeScript-teknologioita. Kehityksessä sovellettiin iteratiivista full stack -kehitysmallia, CI/CD-julkaisuprosessia ja automaattista testausta (Jest, Supertest). Lisäksi modernisoinnin onnistumista tarkasteltiin testaamalla ja mittaamalla sovellusta suorituskyvyn, käytettävyyden ja sisällönhallinnan näkökulmista.

Modernisoinnin tuloksena syntyi teknisesti ajantasainen ja rakenteeltaan modulaarinen sovellus, jonka ylläpidettävyys ja käytettävyys parantuivat merkittävästi. Sovellukselle tehdyt mittaukset osoittivat, että sivuston suorituskyky pysyi erinomaisena, vaikka visuaalisuus ja interaktiivisuus lisääntyivät. Sisällönhallintatoiminnot nopeutuivat moninkertaisesti, ja niiden käyttö edellytti huomattavasti vähemmän toimintoja kuin aiemmin.

Työ osoitti, että modernisointi voi tuottaa merkittävää lisäarvoa myös ei-kaupallisille sovelluksille, kun kehitys toteutetaan suunnitelmallisesti ja moderneja web-teknologioita hyödyntäen. Jatkokehityksen kohteiksi tunnistettiin muun muassa frontend- sekä end-to-end-testauksen laajentaminen, analytiikan lisääminen, jatkuva toimintojen tarpeenkartoitus ja kehitys sekä konttiteknologioiden hyödyntäminen myös tuotantoympäristössä.

The objective of this thesis was to modernize a photography portfolio website using full stack development methods. The end result of the development work was a web application that also supports content management. The purpose was to improve the usability, accessibility, and maintainability of the site and at the same time update its technical foundation.

The project was carried out as a practical development work, in which the previous version of the application was rebuilt using React, Node.js, and TypeScript technologies. The development process followed an iterative full stack model and applied CI/CD deployment workflows as well as automated testing (Jest, Supertest). The success of the modernization was assessed through tests and measurements that focused on examining performance, usability, and content management.

The result was an application that is modular and technically up to date. Modernization significantly improved both maintainability and usability of the website. Measurements and tests that were conducted showed that the site’s performance remained excellent, even though the new version introduced more visual and interactive elements. Content management tasks became clearly faster and required far fewer user actions than before.

This thesis shows and proves that modernization could bring added value also to non-commercial applications when implemented systematically and using modern web technologies. Identified areas on project for later development include expanding frontend and end-to-end testing, adding analytics features, continuous evaluation and improving of functionalities, and extending the use of container technologies to the production environment.