OppgÄva
Prosjekteksamen etter siste Äret pÄ FrontEnd-studiet.
Sentrale tema
Om prosjektet
Dette prosjektet omfattar alt eg lÊrte gjennom mine to Är ved Noroff School of Technology and digital media pÄ studiet Front End Development.
FormÄlet var Ä demonstrere min evne til Ä:
- Planlegge prosjektet
- Definere ein "style-guide" for det visuelle utrykket
- Skissere, designe og prototype layout og innhald for nettsida
- Sette opp og organisere CMS og innhaldstruktur
- Utvikle ein ReactJS- og Styled Components-basert frontend med korrekt semantisk markup og responsiv design
Prosjektet var ei svÊrt god oppleving som eg lÊrte mykje av. Mykje fordi eg mÄtte handtere reelle vanskar, inkludert filopplasting, utfordingar med layout og optimalisering av innhald. Eg mÞtte utfordringane pÄ den beste mÄten eg kunne, og tar med meg verdifull lÊrdom nÄr eg skal ut og leita etter ein i frontend-design og -utvikling.
OppgĂ„va omfatta det Ă„ designe og utvikle ein nettstad for eit imaginĂŠrt lokalt reisebyrĂ„ i Bergen, med det fengane namnet "Holidaze". Dei tilbyr ei teneste for besĂžkjande i omrĂ„det kor dei kan finne hotell, leilegheiter, hytter og gjestehus. Prosjektet krov at eg oppretta ein del av nettsida retta mot brukarar som leita etter overnatting pĂ„ Vestlandet, og â ein administrasjonsdel der tilbydarane kan motta bestillingar og meldingar â samt legge til og redigere overnattingsstadar. Eg mĂ„tte ĂČg sette opp og koble til et CMS som ville lagre data om overnattingstilboda, booking og meldingea sendt av brukarane.
HovudmĂ„let med dette prosjektet var Ă„ handtere eit prosjekt av denne storleiken, ved hjelp av ReactJS som FrontEnd-rammeverk, og Styled Components for styling. Eg Ăžnska Ă„ designe og utvikle ei funksjonsrik, stilig nettside â som skulle engasjere brukaren â og vere laga med ryddig, modulĂŠr og skalerbar kode.
Planlegging
I planleggingsfasen konsentrerte eg meg mest om Ä definere formÄlet med nettsida. Eg mÄtte finne ut kva skalgs innhald eg ville inkludere, og pÄ kva mÄte eg skulle presentere det slik at det appellerte til mÄlgruppa.
Eg sÄg pÄ nettsidene til alle dei store tilbydarane av overnatting, som kunne samanliknast med dei tenestene Holidaze skulle tilby. BÄde nettsidene til store hotell-kjeder og AirBnB var under lupa. Dette gav meg god innsikt i kva funksjonar eg ynskja Ä inkludere i mi teneste.
Eg sĂ„g ĂČg ein god del pĂ„ nettsider som retta seg mot dei meir eventyr- og reiselystne, dĂ„ desse treff godt i Holidaze si mĂ„lgruppe.
Vidare derfrĂ„ starta eg med grunnleggjande skissering, der eg testa korleis eg kunne organisere innhald og gjere nokre tankar rundt kva slags modular eg ville nettsida skulle ha â fĂžr eg flytta meg over i Figma der eg bygde ut ein prototype for mobil og desktop. Samstundes jobba eg med Ă„ bygge ut ein profil-guide basert pĂ„ det designet og utrykket eg ville Holidaze skulle ha.
Figma-prototypen kan ein sjÄ ved Ä klikke pÄ denne lenka: https://www.figma.com/file/9cgqXfbJWGrx2BEHYjOjkX/Holidaze
Profilguiden kan ein sjÄ ved Ä klikke pÄ denne lenka: https://www.figma.com/proto/IiO5Ijg8mM8R8V9iVfeTdV/Holidaze-Style-Guide?node-id = 1%3A32 & skalering = min-zoom og side-id = 0%3A1
Design
Eg hadde som ynskje at nettstaden skulle ha ein livleg, moderne stil som ville appelera til dei eventyrlystne reisande. Det gjekk mykje tid og innsats i Ă„ finne bilder og grafikk av hĂžg kvalitet. Eg gjekk for eit design som var rĂžft og spennande. Det luftige vestnorske landskapet er spegla i eit luftig design med mykje rom for store bilder og stram typografi.
Nettsida har jo ei dobbel rolle: Ä tiltrekke seg turistar pÄ jakt etter eventyr med Ä selge konsptet «Vestlandet», og samstundes vere ei oversiktleg teneste som enkelt hjelper deg Ä finne ein stad Ä overnatte. Som eit resultat av dette, bestemte eg meg for eit slÄande, moderne visuelt utrykk.
CMS / API
Eg tok i bruk Strapi Headless CMS for Ă„ handtere data til nettsida
Eg var nĂždd Ă„ vurde kva slags CMS eg ville nytta som API for data-grunnlaget til nettsida. Valet stod mellom Wordpress og Strapi. Det kan kanskje virke logisk Ă„ berre gĂ„ for det solide og populĂŠre Wordpress-valet. Men eg fĂžretrekk Ă„ jobba med Strapi â som er eit javascript-basert open srouce headless CMS â dĂ„ eg personleg fĂžler at eg fĂ„r tilpassa oppsettet til min type data â slik eg sjĂžlv ynskjer.
Det var ĂČg pĂ„krevd at API-et var tilgjengeleg pĂ„ nett, og difor valte eg Ă„ kĂžyre min Strapi backend pĂ„ ein Heroku-server. Grunnen til dette var at Heroku tilbyr ein rimeleg grei prismodell til mitt bruk (ettersom sida er ei eksamensoppgĂ„ve, er det ikkje noko reell trafikk Ă„ tenke pĂ„), samt at dokumentasjonen var god. Heroku tilbyr dog inga lagring av filer, sĂ„ dette mĂ„tte eg legge til via Strapi sitt upload provider plugin system. Valet falt pĂ„ Cloudinary. Mest for Ă„ teste noko nytt, dĂ„ eg hadde nytta Amazon S3 tidlegare.
Eg jobba ein del med Ă„ definere alle nĂždvendige innhaldstypar i Strapi. Eg trong typar for bestillinga og meldingar, samt overnattingstadane. Eg laga ĂČg innhaldstypar fasilitetane som utleigarane kunne tilby, for eksempel «gratis parkering», «badebasseng» etc.
Dette var ei relativt grei oppgÄve Ä lÞyse med Strapi.
Eksempel pÄ innhaldstype i Strapi
Prosjektstruktur
Prosjektet starta med ein enkel «create-react-app», der eg ĂČg la til React Router og Styled Components. Eg brukte sĂ„ litt tid pĂ„ Ă„ bestemme meg for kva slags struktur eg ynskja Ă„ ha i prosjektet. Eg ville separere logikk, styling, hooks og context og valde difor ein mappestruktur som forsterka dette.
Komponentmapper
Kvar komponent lever i si eiga mappe, med ei [NametTilKomponenten].jsx-fil som innheld all markup og logikk, og ei [namnetPĂ„Komponenten.styles].js-fil som inneheld all styling. Den sistnamnde fila eksporterer ein Styled Component som blir importet i .jsx-fila.
Ved Ä bruke denne mÄten Ä namngi og organisere filene min, fekk eg dra nytte av Visdual Studio Code si utmerka filsÞkings-funksjon (som ein opnar ved Ä trykke cmd/ctrl + p). Om du til dÞmes brukar sÞkeordet «Footer» sÄ returner VSCode ei liste med Footer.jsx og footer.styles.js-filene. Eit sÞk etter «styles.js» returnerer ei liste over alle Styled Components eg har laga, medan eit sÞk etter «.jsx» returnerer ei liste over alle komponentane. Alt i alt gjer dette det raskt og enkelt Ä navigere mellom filer i eit prosjekt av denne storleiken.
Strukturert namning av komponentar og filer gjorde det enkelt Ă„ navigere etterkvart som prosjektet vart stĂžrre
Assets
Eg har samla alle static assets i ei mappe som igjen er separert i grafiske element, som logoar og ikonografi â og ei mappa for fotografi.
Jeg har samlet alle mine statiske eiendeler i en mappe med eiendeler, og skilt grafikk somlogoer og ikoner fra fotografiske bilder.
Constants, hooks og context
Ei av mappene kalla eg «Global». Den inneheld funksjonar og variablar eg anser Ä ha ei global nytte i heile prosjektet.
Constants-mappa inneheld mellom anna variablar for skjema-validering som til dÞmes minimumslengde pÄ meldingar, og maks storleik pÄ filer, samt API-adresser. à ha desse variablane samla pÄ ein stad gjer det lett Ä vedlikehalda, oppdatere og utvida seinare.
Context-mappa inneheld innehald alle context-providers som nettsida benyttar seg av. Til dÞmes AuthContext, som held kontroll pÄ om brukaren er logga inn.
Functions-mappa inneheld ei rekke hjelpefunksjonar som Ă„ handtere datoar og liknande. Dei blir importert og brukt i fleire av komponentane i prosjektet.
Hooks-mappa inneheld eigendefinerte hooks, som til dÞmes useFetch-hooken som eg brukar til hente og oppdatere data frÄ API-et.
Styles-mappa inneheld global CSS som til dĂžmes ei CSS-reset-fil og CSS-variablane mine.
CSS -variablar
Eg eg svĂŠrt glad i bruke CSS custom properties â eller CSS-variablar. Her definerer eg fargane, typografien og avstandar i designet mitt, samt transitions, border-radius og andre verdiar som vert nytta fleire stader i prosjektet. Eit slikt system gjer det lett Ă„ oppdatere, utvide og redigere etter kvart som prosjektet veks.
Git
SjÞlv om eg jobba aleine med dette prosjektet, sÄ nytta eg Git frÄ start til slutt. Eg oppretta nye branches for dei store endringane, og sÞrga for Ä inkludere gode nÞkkelord i starten av commit-meldingane mine, som til dÞmes «Style: [meldingen min]» for CSS-endringar, og «Fix: [meldingen min]» for Ä fikse skrivefeil og liknande.
Eg valde ĂČg Ă„ kopla github-repoet til Netflify slik at kvar gong eg pusha til main-branchen, sĂ„ vart ei ny oppdatert versjon av nettsida bygd og gjort tilgjengeleg pĂ„ nett, slik at eg fekk testa den i ei realistisk setting.
Validering av skjema
Eg brukte Rect Hook Form saman med Yup for Ä validere alle skjema pÄ nettsida. Dette gav meg eit fleksibelt system for Ä kunne teste at dataen fÞlger eit oppsett eg sjÞlv definerte, samt gi brukaren tydeleg og korrekt tilbakemelding.
Innlogging med «noko attÄt»
Eg ville «piffe opp» innloggingsida, og gi den litt meir personlegheit. Eg tinga difor ein 2D-designer som laga ein figur som helsar pÄ deg nÄr du kjem til sida kor loggar deg inn i admin-panelet. Figuren smiler fint nÄr brukaren er i input-feltet for brukarnamn, men held seg for augene nÄr brukaren skiv inn passordet sitt. Skulle innlogginga feile, til dÞmes dersom brukaren skriv feil brukarnamn eller passord, sÄ held figuren seg for munnen. Det er ein meiningslaus funksjonalitet, men den er jo litt sÞt, dÄ. Og livnar opp ei ellers kjedeleg innloggingside.
Dei ulike versjonane av figuren medan brukaren loggar inn
Detaljsida for overnatting
Kvar overnatting har si «produktside», og er i hovudsak det produktet nettsida skal selje. Den viser all relevant informasjon og overnattingstaden inkludert bilder og detaljar om kva som er inkludert. Eg valde difor Ä la ein separat «call-to-action-box» fÞlge brukaren si scrolling nedover sida, slik den totale prisen alltid var synleg, samt at knappen for «Book now» alltid var tilgjengeleg.
Admin-panel
Admin-panelet er satt opp som ei enkel side, men med tre ulike visningar: overnattingstadar, bestillingar og meldingar. Brukaren vel aktiv visning ved hjelp av ein sentrert, tydleg meny i toppen av panelet. I her tar eg i bruk CSS-grid for Ä sÞrge for ei god og oversiktleg visning bÄde pÄ smÄ og store skjermar.
React awesome reveal
Eg er allergisk mot massive «veggar med tekst». Eg ville difor bruke nokre scroll-baserte animasjonar for Ä introdusere innhaldet pÄ ein lekker mÄte. Dette brukte eg npm-pakken «React Awesom Reaveal" til. Det kan sjÞlvsagt bli for mykje slike animasjonar, og det bÞr brukast sparsomt. Men, dÄ dette var eit eksamensprosjekt der eg ville skape litt ekstra «wow-faktor», sÄ krydra eg litt meir enn det ein kanskje bÞr.
Input type = "date"
SÞkefelta og bestillingskjema benyttar seg av standard HTML input-felt med type="date" som attributt. Det beste hadde nok vore Ä funne eit javascript-bibliotek som gav ein date-picker, men eg ville utfordre meg og teste eige evne til Ä handtere og validere datoar. Eg laga mellom anna nokre hjelpefunksjonar som bidrar til Ä sette mimiumsdato for utsjekk basert pÄ valgt dato for innsjekk. I tillegg hindrar eg brukaren i Ä tinga overnatting med eit negativt antall dagar.
Input type="date" slik det ser ut pÄ (frÄ venstre) Chrome, Firefox, iOS Safari og MacOS Safari
Testing
Nettsida er utviklar med «mobile-first»-tankegang. Og gjennom heile prosessen har eg sÞrga for Ä teste pÄ ulike datamaskinar, mobiltelefonar og nettbrett. BÄde via localhost medan eg skreiv kode, men og via versjonen av nettsida som lÄg live pÄ Netlify, og som blei bygd kvar gong det vart pusha kode til Main-branchen.
Konklusjon
Det er inga tvil om at eg lĂŠrte svĂŠrt mykje av denne oppgĂ„va ĂČg. Prosjektet understreker behovet for jobbe strukturert. Ein mĂ„ skrive ryddig og oversiktleg kode for Ă„ kunne sĂžrge for at prosjektet kan vekse seg stort, og samtundes vere lett Ă„ vedlikehalde.
PĂ„ dette siste eksamensprosjektet vil eg seia at eg har gitt alt. Men som perfeksjonist ser eg sjĂžlvsagt smĂ„ting eg kunne ha flikka, fiksa og pynta pĂ„ i lang tid. Men mykje av lĂŠrdomen ligg ĂČg i Ă„ kunne levere eit fungerande produkt innanfor tidsrammene ein har.
Alt i alt trur eg at eg har lÊrt mykje nyttig i lÞpet av desse to Ära pÄ FrontEnd-studiet. Og eg gler meg til Ä lÊre enno meir nÄr eg kjem ut i arbeidslivet igjen.
âŠog kanskje har nettopp DU lyst Ă„ ha meg med pĂ„ laget? Ta gjerne kontakt for ein uforpliktande prat! :)
