Bytta ut Excel-ark med Sanity, og lagde bakdel.no

– Da jeg lagde meg Excel-ark for å bake, tenkte jeg at det må være mulig å gjøre dette bedre, skriver Dag Stuan.

På bakdel.no kan du lese oppskrifter, og skalere dem som du selv vil. 📸: Ole Petter Baugerød Stokke
På bakdel.no kan du lese oppskrifter, og skalere dem som du selv vil. 📸: Ole Petter Baugerød Stokke Vis mer

Noe av det beste med programmering er at man kan løse hverdagslige problemer helt selv.

Med det siste hobbyprosjektet mitt gjør jeg nettopp det.

Møt Bakdel.no!

Bak&del har fått domenet bakdel.no.
Bak&del har fått domenet bakdel.no. Vis mer

Problemet

De siste årene har jeg begynt å bake brød og annen gjærbakst hjemme. Jeg har noen oppskrifter som jeg har brukt lenge, og finner også oppskrifter på nettet når jeg vil bake en annen brødtype eller andre ting.

Det finnes tusenvis av kilder til oppskrifter på nettet, og det er derfor sjelden jeg finner oppskrifter på samme sted. Mange av sidene er helt “ok” å bruke, men jeg syns allikevel at det ofte er mer fokus på personen som publiserer oppskriften, heller enn meg som skal bake. Oppskriftene er fulle av livshistoriene til bloggerene som skriver de, har massevis av reklame, eller affiliate-lenker til ting jeg kan kjøpe.

Og noen av stedene har også brukt en slags “bait-and-switch” taktikk hvor de har lagt oppskriftene bak betalingsmur etterhvert.

I tillegg til disse problemene syns jeg også det er vanskelig å bruke oppskriftene. Jeg må konstant scrolle mellom ingredienslista og oppskriftsteksten når jeg er på mobil, og oppskriftsteksten er ofte fylt av mye informasjon jeg ikke trenger.

Men det siste problemet, som er hovedgrunnen til at jeg har laget Bakdel, er skalering. Når jeg baker brød vil jeg bake tre brød om gangen, siden det er det jeg har plass til i ovnen. Oppskriftene jeg finner er ofte for ett eller to brød om gangen, og da må jeg skalere selv.

Så når jeg lagde meg et eget Excel-ark bare for å bake, da tenkte jeg at det må være mulig å gjøre dette bedre.

Excelark for skalering av ingredienser i en brødoppskrift.
Excelark for skalering av ingredienser i en brødoppskrift. Vis mer

Hvordan kan det bli bedre?

Det jeg ønsket meg, var en plass hvor jeg kunne:

  • Lagre oppskriftene jeg liker i et format som er lettlest og oversiktlig, uten reklame eller annen unødvendig informasjon.
  • Slippe å scrolle mellom ingredienslista og oppskriftsteksten underveis.
  • Skalere oppskriftene slik at jeg kan bake tre brød istedenfor to, eller lage vafler selv om jeg bare har to egg igjen i kjøleskapet på en søndag.

Ideen

I Bekk Trondheim har vi i høst hatt noen workshop-kvelder hvor vi har lært oss å bruke Sanity. Sanity er et hodeløst CMS som lar meg definere innhold i form av dokumenter eller objekter. I motsetning til et tradisjonelt CMS, er ikke innholdet i et hodeløst CMS bundet til noe presentasjonslag, men er nærmere beslektet en tradisjonell SQL-database eller andre mer lavnivå abstraksjoner for innhold.

Redaktørgrensesnittet i Bakdel
Redaktørgrensesnittet i Bakdel Vis mer

Det som skiller Sanity fra andre hodeløse CMS-løsninger, er muligheten til å skreddersy redaktøropplevelsen. Når man setter opp et prosjekt er man selv ansvarlig for å sette opp “Sanity Studio”-som er brukergrensesnittet for å redigere innholdet. Dette gjør at man relativt enkelt kan skreddersy en redaktøropplevelse til innholdet som produseres.

Ingrediens-referanser inne i fritekstfelt i Sanity
Ingrediens-referanser inne i fritekstfelt i Sanity Vis mer

Når jeg ble litt kjent med hvordan man satte opp Sanity, fikk jeg en idé: Hva om jeg kan modellere oppskrifter og ingredienser som innhold i Sanity, og referere til ingredienser inne i en oppskriftstekst? På den måten kunne jeg sette opp en innholdsmodell som gjorde at jeg lett kunne legge inn oppskrifter, og referere til ingrediensene inne i oppskriftsteksten.

Med litt mer logikk kunne jeg også skalere ingrediensene underveis, slik at ferdig skalerte ingredienser kunne vises inne i teksten. Når jeg viste en liten demo frem til noen kolleager fikk jeg også tips om at det kunne vært fint å sjekke av ingrediensene underveis, og det gikk også ganske raskt å legge til. Med det var grunnproduktet på plass, og mesteparten av tiden etter det har gått med til finpuss.

Andre teknologivalg

Når jeg koder på hobbybasis prøver jeg å ha en god blanding av teknologi jeg kjenner godt, samtidig som jeg prøver å bruke noe nytt. Da kan jeg være produktiv med de teknologiene jeg kjenner fra før, samtidig som jeg kan få lurt inn litt ny kunnskap. Kjente teknologier og produktivitet hjelper også for at jeg faktisk skal beholde motivasjonen helt til jeg har et brukbart produkt.

  • Bakdel består av en Next.js-app som både inneholder nettsiden og Sanity-studioet.
  • Styling og UI-komponenter bruker med Tailwind og Shadcn for å gjøre det raskest mulig å komme i gang, pluss at jeg ikke hadde jobbet med noen av disse før, så det var en fin mulighet til å teste de.
  • Jeg fikk også litt drahjelp av Vercel sin v0-plattform for å komme raskt opp i fart
  • Ellers kjører appen hos Vercel, med DNS og proxy hos Cloudflare.

Alle disse teknologivalgene bidro til at det tok veldig kort tid før jeg var i produksjon, og første versjon av appen var ute etter bare en ukes arbeid.

Veien videre

Etter omtrent en måneds arbeid har jeg et produkt jeg er relativt fornøyd med, og som jeg bruker flere ganger i uka når jeg skal bake.

Ingrediensene vises inne i teksten selv om oppskriften er skalert, og man kan skalere basert på enkeltingredienser. I tillegg er det lite unødvendig informasjon, og ingen reklame. 🎉

Selv om jeg ikke har noen planer om å begynne å konkurrere med Matprat, er det fint å iallefall ha én plass jeg trenger å gå til når jeg skal bake, og hvor det er lett å legge inn oppskriftene jeg liker senere. Og hvis noen andre også kan få nytte av det, er det også en fin bonus.

Jeg har planer om å prøve å få inn enda mer skaleringslogikk fremover, blant annet mulighet til å endre på enheter i oppskriften som å bytte fra teskje til spiseskje når man skalerer opp en oppskrift, eller la brukerene bytte fra desiliter til gram selv.

Hvis du har et forslag til en oppskrift som mangler, eller kanskje du lurer på noe annet? Ta gjerne kontakt med tilbakemeldinger!

Du finner løsningen på bakdel.no.

🍑