Verkkosivuprojektin toteuttaminen MERN-teknologiapaketilla

Abstract

Opinnäytetyössä toteutettiin full-stack-järjestelmä, joka suunniteltiin ja toteutettiin projektin asiakkaalta saadun vaatimusmäärittelyn mukaisesti. Järjestelmä toteutettiin MERN-teknologiapaketilla, jonka todettiin toimivan hyvin järjestelmälle asetettujen vaatimusten toteuttamiseen. Toteutettu järjestelmä koostuu Reactilla toteutetusta web-käyttöliittymästä, sekä Node.js:llä, Expressillä ja MongoDB:llä toteutetusta palvelin- ja tietokantaosasta.

Työssä toteutettua järjestelmää käsitellään kolmessa osassa, jotka ovat järjestelmän arkkitehtuuri, käyttöliittymän toteutus ja palvelin- ja tietokantaosuuden toteutus. Osuuksia käsitellään koodiesimerkkien, käyttöliittymäkuvien sekä järjestelmän ja sen komponenttien toimintaa havainnollistavien kuvaajien kautta. Toteutettua järjestelmää koskevien esimerkkien lisäksi työssä käsitellään yksinkertaisten React- ja Express-sovellusten luominen, joiden pohjalta voidaan toteuttaa opinnäytetyössä toteutetun projektin kaltainen kokonaisuus.

Järjestelmälle määritetyt sisällölliset ja toiminnalliset vaatimukset täytettiin, mutta aikataulullisista rajoitteista johtuen järjestelmää ei saatu vietyä tuotantoympäristöön. Järjestelmä tullaan jatkokehityksen yhteydessä saattamaan tuotantoon, ja opinnäytetyössä käsitellään myös tähän vaadittavia toimenpiteitä.

Tehdyt teknologiavalinnat koettiin tämän projektin tarkoituksiin onnistuneiksi, mutta tapauksissa joissa asiakkaan on voitava ylläpitää suurta osaa sivustosta itsenäisesti, suositellaan muita ratkaisuja kuten WordPressiä.

The objective of this thesis project was to design and develop a web-based system to customer specification. The system was built using the MERN-stack, which was concluded to fulfill the requirements set for the project. The developed system consists of a front-end built with React and a back-end built with Node.js, Express and MongoDB.

The thesis discusses the system in three parts, which are the overall system architecture, a detailed explanation of the user interface, and a closer look at the back-end developed for the system. Code examples, architectural diagrams and images of the user interface are used to elaborate on the structure and operation of the system. In addition, the thesis also provides instructions on setting up simple React and Express applications. These examples form the basis for the system described in this thesis.

The requirements for the system were met, but due to optimistic planning regarding the timeline of the project, the system was not put into production. The system will be put into production in future development, and the steps necessary to do so are discussed in this thesis.

The technology choices made in the project were successful, but in cases where the customer needs to do more extensive maintenance on their own, a solution like WordPress is recommended.