Strikkeapp

Jeg digger å strikke og i sommer fant jeg ut at jeg ville lære mer om webutvikling og React. Derfor bestemte jeg meg for å lage en strikke-app!

Idéen er ganske enkel – en app der jeg kan samle på strikke-oppskrifter jeg liker, og holde oversikt over mine pågående prosjekter.

React - hva jeg likte og ikke likte

Å komme i gang med React var på mange måter rett frem, men samtidig har jeg også brukt mye unødvendig tid på ting som ikke var så relevant for produktet.

React er en teknologi som har eksistert siden 2013 og da finnes det naturligvis mye StackOverflow spørsmål og Youtube-videoer som allerede er utdatert.

Heldigvis fant jeg til slutt ut at webpack og babel var old news – vite er tydeligvis det mange ønsker å ta i bruk i dag.

Jeg startet prosjektet med å lage en vanlig React webapp, men fant kjapt ut at det beste valget var å lage en React Router webapp.

Jeg startet prosjektet med å lage en vanlig React webapp, men fant kjapt ut at det beste valget var å lage en React Router webapp.

Det var hovedsakelig to grunner til dette: Jeg ønsket å få til routing mellom sider, og jeg ville laste data fra en SQL-database. Dette gjorde React Router enkelt og greit med sine loader() og action()-funksjoner.

Styling

Når det kom til stylingen var jeg allerede litt kjent med vanilla css fra da jeg lagde nettsiden min, og ønsket å prøve TailwindCSS da jeg hadde hørt mye bra om det.

Det jeg likte aller best med tailwind var at det var lettere å knytte css-reglene til hvilket element de virket på, samtidig som jeg slapp å forholde meg til mange separate filer.

Noe som var litt forvirrende var mengden classNames og at de fort kunne bli ganske lange, og dermed gjorde HTML-en litt uoversiktlig. Det tok også litt tid å bli vant med navnekonvensjonene og å huske alle klassene uten å måtte slå opp i dokumentasjonen.

I alt synes jeg det å bruke tailwind var ryddigere enn tradisjonell css, og det kommer jeg nok til å fortsette med i videre prosjekter.

SQL og databaseintegrasjon

Jeg hadde aldri jobbet med SQL før, så dette var en av de største utfordringene i prosjektet. Jeg ønsket derfor å finne en løsning som var enkel å sette opp og ryddig å jobbe med. Jeg endte opp med å bruke Drizzle ORM, som gjorde det mye lettere å koble til SQL-databasen enn jeg hadde sett for meg.

Det jeg likte aller best var at Drizzle lot meg definere tabeller og queries direkte i TypeScript, noe som ga bedre oversikt og liknet på SQL-spørringer jeg har blitt introdusert for på studiet.

Hosting

Når det kom til hvordan jeg skulle hoste appen min valgte jeg å bruke DigitalOcean, da jeg allerede har brukt dette til nettsiden min og var kjent med dette fra før av.

DigitalOcean har også en innebygd database-funksjon som gjorde at jeg enkelt kunne opprette databasen min der.

Utfordringer

Det største problemet jeg støtte på var å få databasen til å fungere. Jeg brukte mye tid på å prøve å forstå hvordan jeg skulle sette opp tabeller og queries, og hvordan jeg skulle koble dette til React Router.

Jeg brukte også mye tid på å prøve å få tailwind til å fungere som jeg ønsket, spesielt med tanke på responsiv design.

Resultater

Alt i alt er jeg veldig fornøyd med hvordan prosjektet mitt ble. Jeg har lært mye om React, TailwindCSS og SQL, og jeg har fått en bedre forståelse for hvordan backend og frontend kan jobbe sammen.

Appen fungerer som jeg hadde håpet, og jeg håper å kunne bruke den til å holde oversikt over strikkeprosjektene mine i praksis om ikke altfor lenge!