Full-stack kahvikaupan verkkosivusto

Abstract

Opinnäytetyön tarkoituksena oli suunnitella ja luoda visuaalisesti miellyttävä ja ammattimaisen näköinen full-stack-verkkosivusto kahvikaupalle. Suunnittelussa käytettiin Canva-sivustoa, käyttöliittymäkehityksessä hyödynnettiin React.js JavaScript-kirjastoa, ja palvelimen suorittamiseen käytettiin Node.js-ajoympäristöä JavaScript-koodin käsittelyyn. Lopuksi tietokantana otettiin käyttöön PostgreSQL.

Sivuston suunnittelu aloitettiin luomalla pohja Bootstrap-ohjelmistokehystä käyttäen, mikä mahdollisti nopeasti reagoivien käyttöliittymien luomisen. Suunnittelu käynnistettiin Canva-sivuston avulla Bootstrap-pohjaa hyödyntäen. Sivuston suunnitelman valmistuttua, siirryttiin projektin rakentamiseen, ja ensimmäisenä kehitettiin käyttöliittymä valmiiksi ennen palvelimen toteutusta.

Projektin aikana ostoskori aiheutti eniten ohjelmistovirheitä, koska sivuston juomat koostuivat kolmesta eri koosta, jolloin tuotteiden oikea koko ei näkynyt ostoskorissa oikein. Kun käyttöliittymä toimi moitteettomasti, aloitettiin palvelimen kehitys. Tavoitteena oli vaihtaa "dummy data" sivuston Menuun sekä toteuttaa käyttäjän kirjautumistoiminnot hyödyntäen salt-and-hash-menetelmää.

Lopuksi verkkosivustoon lisättiin localStorage tuotteille ja käyttäjän ostoskorin sisällölle, jotta istunto voitiin tallentaa seuraavaa kertaa varten. Kun verkkosivusto oli valmistunut, luotiin järjestelmänvalvojan sivu, jotta käyttäjiä, tuotteita ja tilauksia voitiin hallita.

Opinnäytetyön lopputuloksena valmistui toimiva verkkosivusto, palvelin ja järjestelmänvalvojan sivu. Jotkut toiminnot jätettiin pois, jotta projekti pysyi realistisessa aikataulussa, mutta ne säilytettiin mahdollisina jatkokehitysmahdollisuuksina. Työn aikana huomattiin, kuinka paljon valmis suunnitelma helpotti kehitystyötä, erityisesti silloin, kun järjestelmänvalvojalle ei ollut tehty erillistä suunnitelmaa. Opinnäytetyön koodin löytää osoitteesta: https://github.com/t0turi00/Coffee_Shop.