Verkkosivuston kehittäminen Next.js:llä
Åström, Jeremy (2025)
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-202501101187
https://urn.fi/URN:NBN:fi:amk-202501101187
Tiivistelmä
Drinkkireseptisivustot eivät ole kehittyneet samaa vauhtia ruokareseptisivustojen kanssa, vaikka kysyntää helppokäyttöiselle ja modernille reseptipalvelulle löytyy. Tämän opinnäytetyön aiheena on kehittää drinkkireseptejä, sekä juoma-arvosteluita käsittelevä verkkosivu käyttäen moderneja teknologioita ja työkaluja. Työn tavoitteena oli kehittää käyttäjäystävällinen ja responsiivinen verkkosivusto, jossa drinkkireseptien sekä juoma-arvosteluiden selaaminen ja hallinta on keskeisiä toimintoja. Työn rajauksena oli sivuston julkaiseminen, sekä laajempi testaaminen.
Verkkosivusto toteutettiin Next.js-nimisellä React-kehyksellä, jonka erikoisuuksiin kuuluu mm. palvelinpuolen renderöinti ja tiedostopohjainen reititys. Sovelluksen tietokantana käytetään Mon-goDB:tä, ja sen yhteydessä tietokantaintegraatiotyökalua Prismaa, mikä helpottaa tietokantakyselyiden käsittelyä. Drinkkireseptejä ja juoma-arvosteluita voi luoda ainoastaan ylläpitäjät, joiden tunnistamiseen käytetään Clerk-autentikointipalvelua. Sovelluksen käyttöliittymä luotiin React-komponenttien avulla ja tyylittelyyn käytettiin NextUI-komponenttikirjastoa, sekä Tailwind CSS-kirjastoa, mikä mahdollistaa tyylien muokkaamisen suoraan HTML-elementeissä.
Projektissa käytettiin Scrum-projektinhallintamenetelmää, jossa kehittämisvaiheet on jaettu neljään kahden viikon sprinttiin. Kehittämisen osa-alueet on listattu tuotteen kehitysjonoon (Project backlog).
Tuloksena syntyi toimiva verkkosivusto, jossa käyttäjät voivat selata reseptejä, sekä juoma-arvosteluita ja ylläpitäjät voivat hallita niitä. Projekti saavutti suurimman osan vaatimuksistaan, mutta laajempi testaaminen sekä hakukentän luominen jäivät toteuttamatta. Kokonaisuutena projekti syvensi oppimista full-stack kehittäjänä.
Verkkosivusto toteutettiin Next.js-nimisellä React-kehyksellä, jonka erikoisuuksiin kuuluu mm. palvelinpuolen renderöinti ja tiedostopohjainen reititys. Sovelluksen tietokantana käytetään Mon-goDB:tä, ja sen yhteydessä tietokantaintegraatiotyökalua Prismaa, mikä helpottaa tietokantakyselyiden käsittelyä. Drinkkireseptejä ja juoma-arvosteluita voi luoda ainoastaan ylläpitäjät, joiden tunnistamiseen käytetään Clerk-autentikointipalvelua. Sovelluksen käyttöliittymä luotiin React-komponenttien avulla ja tyylittelyyn käytettiin NextUI-komponenttikirjastoa, sekä Tailwind CSS-kirjastoa, mikä mahdollistaa tyylien muokkaamisen suoraan HTML-elementeissä.
Projektissa käytettiin Scrum-projektinhallintamenetelmää, jossa kehittämisvaiheet on jaettu neljään kahden viikon sprinttiin. Kehittämisen osa-alueet on listattu tuotteen kehitysjonoon (Project backlog).
Tuloksena syntyi toimiva verkkosivusto, jossa käyttäjät voivat selata reseptejä, sekä juoma-arvosteluita ja ylläpitäjät voivat hallita niitä. Projekti saavutti suurimman osan vaatimuksistaan, mutta laajempi testaaminen sekä hakukentän luominen jäivät toteuttamatta. Kokonaisuutena projekti syvensi oppimista full-stack kehittäjänä.