E-commerce FrontEnd kopla til Headless CMS

Om prosjektet

Oppgåva bestod av å kode ei e-commerce nettside med funksjonalitet både for kundar og administrator av sida. Sida skulle vere responsiv, og hente data frå ein valfri backend. Sida måtte kodast i vanilla JavaScript, og ikkje bruke noko rammeverk.

Gå til nettsida

Eg valde å bruke Strapi (ein open-source Headless CMS) som min backend. Der la eg inn alle produkt og sidedata som oppgåva krov at eg henta inn i nettsida. CMSen lasta eg opp på Heroku(https://www.heroku.com).

All kode skulle delast opp i ES6 modular, og funksjonar skulle vera gjenbrukbare.

Oppgåva hadde som krav at sida skulle by på god brukaroppleving (UX) og gjennomført design av grensesnittet (UI).

FrontEnd skulle bestå av:

• ei heimeside med mellom anna eit bannerbilde – henta frå CMS
• ei side med alle produkta, samt eit søkefelt for å søke filtrere produkt der tittel og info inneheld søketeksten
• sider med produkt-detaljar – laga programatisk når ein klikkar seg inn på produktet
• handlekorg-side der ein ser produkta ein har lagt i korga, samt total sum. Der kan ein òg slette produkt frå handlekorg.
• ei login-side skulle gi administrator høve til å legge til, oppdatere og slette product via nettsida – altså utan å måtte logge inn på CMSen.

Å gå vidare i kjøpsprosessen frå handlekorga – med betalingssytem – var ikkje ein del av oppgåva.