Full stack web-sovellus yhtyeelle : verkkosivut, verkkokauppa ja maksunvälitysintegraatio

Abstract

Opinnäytetyön tavoitteena oli toteuttaa full stack -web-sovellus pirkanmaalaisen metalliyhtyeen, Nøkian Monarkin käyttöön. Sovelluksen tarkoituksena oli koota yhtyeen keskeiset tiedot ja materiaalit yhteen paikkaan helposti saavutettavalla tavalla sekä mahdollistaa fanituotteiden myynti yhtyeen verkkokaupan kautta. Työ syntyi yhtyeen tarpeesta parantaa näkyvyyttään, ammattimaisuuttaan ja tavoittaa laajempi yleisö.

Työssä tuotettiin räätälöity web-sovellus, joka sisältää yhtyeen kotisivut, uutisosion, hallintapaneelin sisällön muokkaamiseen sekä verkkokauppatoiminnallisuuden. Maksunvälityksen toteuttamiseen integroitiin kolmannen osapuolen palvelu, Stripe, joka mahdollistaa turvallisen ja sujuvan maksukokemuksen asiakkaille. Sovellus rakennettiin modernilla MERN-teknologiakokonaisuudella: frontend toteutettiin Reactilla, backend Node.js:llä ja Expressillä, ja tietokanta sijoitettiin MongoDB Atlas -pilvipalveluun. Sovellus julkaistiin Fly.io-palvelussa.

Sovellus vastaa yhtyeen tarpeisiin keskittämällä tiedot ja tuotteet yhtenäiselle, hallitulle alustalle, parantaen sekä yhtyeen sisäisiä toimintoja että fanien käyttäjäkokemusta. Jatkokehityksen mahdollisuuksia ovat esimerkiksi uusien tuotteiden lisäämisen mahdollistaminen suoraan hallintapaneelin kautta, käyttöliittymään toteutettavat vaihtoehtoiset dark mode ja light mode -näkymät sekä uutisosioon lisättävä tuki monipuolisemmalle sisällölle, kuten kuville ja linkeille.

The objective of this thesis was to design and implement a full stack web application for the use of the metal band Nøkian Monark from the Pirkanmaa Region. The goal was to create a centralized platform to present the band’s key information and materials in an easily accessible format, and to enable merchandise sales through an integrated e-commerce solution. The project originated from the band’s need to improve their visibility, professional image, and audience reach.

A customized web application was developed, featuring a public website, a news section, an administrative panel for content management, and an e-commerce functionality. The payment process was handled by integrating the third-party payment service Stripe. The application was built using the modern MERN technology stack: the frontend was implemented with React, the backend with Node.js and Express, and the database was hosted on MongoDB Atlas. The completed application was deployed on the Fly.io cloud platform.

The application meets the band's needs by providing a controlled and unified platform for their content and merchandise while also improving the fan experience. Future development possibilities include allowing the administrators to add new products directly via the management panel, implementing user-selectable dark mode and light mode themes, and expanding the news section to support richer content such as images and links.