Vi har tusentals små och stora bostadsrättsföreningar och bostadsrättsföreningar i Norge där jag bor, och gemensamt för dem alla är att de ofta behöver en plats att publicera information till sina invånare. Men många små lägenheter har inte stora budgetar för att utveckla sina egna webbplatser.
Jag är styrelseledamot i en liten bostadsrätt med 21 sektioner och tills nyligen har vi inte klarat mer än mejl och en Facebooksida för att få ut information till de boende. Planen var att fortsätta så - tills en nyinflyttad granne kom fram och frågade varför vi inte hade en hemsida där han kunde hitta användbar info. Och varför inte? Jag var bara tvungen att ta reda på hur vi kunde bygga det utan att spendera för mycket pengar.
Den billigaste lösningen var förstås att bygga allt själv.
Jag är en självlärd utvecklare som har kodat i JavaScript och React i några år, mest på hobbybasis. Strax före jul 2020 stötte jag på ett nytt komponentbibliotek som heter Chakra UI som lovade att göra det enkelt att skapa snygga användargränssnitt utan att behöva bygga allt från grunden.
Efter att ha lekt lite med Chakra UI några helger och sena nätter bestämde jag mig för att göra något användbart – istället för bara en annan testwebbplats (eller att göra-app, gud förbjude). Kanske var det möjligt att skapa och driva en ny hemsida för lägenheten helt kostnadsfritt? Jag var tvungen att prova.
Resultatet blev en ganska presterande hemsida som inte kostar bostadsrätten ett öre att driva - förutom de 120 kronorna (~12 euro) om året för domänen https://gartnerihagen-askim.no.
Så här ser framsidan av den färdiga webbplatsen ut:
Separat område för inloggade användare
Syftet med webbplatsen var först och främst att ge de boende en plats att hitta användbar information endast för invånarna. Men webbplatsen bör också främja lägenheten och grannskapet för potentiella bostadsköpare.
Jag gillar att ha en plan innan jag börjar, så jag började rita några skisser och trådramar med mitt favoritverktyg för dessa saker:Figma.
Framsidan ska vara tillgänglig för alla, men det var också nödvändigt att ha lite innehåll bakom en inloggning:
Så här ser sidorna för inloggade användare ut:
Teknikval
Jag ville att den nya webbplatsen skulle vara så användarvänlig som möjligt, samtidigt som den skulle vara blixtsnabb och använda bästa praxis i modern webbutveckling. Jag ville använda funktionella och återanvändbara komponenter i React.js med "krokar" som låter mig hantera tillstånd enkelt.
Jag bestämde mig också för att använda TypeScript för att minska risken för buggar när jag skickar rekvisita till olika komponenter - men också för att användningen av TypeScript ger mig otroligt användbar information i VS-kod under kodning:
Språk och ramverk - frontend
Jag bestämde mig ganska tidigt i projektet för att bygga webbplatsen med hjälp av React-ramverket Gatsby. Jag funderade också på att använda Next.js, men jag hade mycket mer erfarenhet av Gatsby och då blev det också det naturliga valet för mig.
En av fördelarna med Gatsby är att du får hemsidor som är extremt snabba. Gatsby skapar statiska HTML-sidor som är mycket väl optimerade, inklusive klassens bästa optimering av bilder (som har blivit ännu bättre med Gatsby 3.0). Det är också enkelt att skapa webbsidor med bra SEO (sökmotoroptimering).
För att påskynda processen att skapa ett snyggt användargränssnitt valde jag Chakra UI. Med Chakra UI får du även en rad bonusförmåner, som att du följer WAI-ARIA-standarder för tillgänglighet, och att du kan anpassa dina egna teman för din webbplats. Det betyder att du knappt behöver skriva någon CSS alls, utan kan definiera färgpaletter, typsnitt, avstånd med mera genom att utöka standardtemat (som redan ser väldigt snyggt ut).
Chakra UI gör det också enkelt att skapa responsiva webbplatser, faktiskt utan att behöva skriva en enda mediefråga.
Backend
När det kom till var jag skulle vara värd för sajten stod valet mellan Gatsbys egna Gatsby Cloud , eller Netlify. Jag bestämde mig för det senare, eftersom lite trafik och bostadsrättens blygsamma behov skulle göra det möjligt att driva webbplatsen på gratisnivån.
Att få igång en Gatsby-webbplats på Netlify är lika enkelt som att peka Netlify till kodförrådet i Git. Så fort jag skjuter ny kod till projektets huvudgren på Github, kör Netlify automatiskt en ny version av webbplatsen.
För att publicera innehåll ville jag ha en huvudlös CMS-lösning. Jag övervägde både den norska headless CMS-lösningen Sanity och headless Wordpress, eftersom jag hade erfarenhet av båda. Till exempel använder min personliga hemsida lekanger.no Sanity, medan Wordpress också har kommit långt som ett "huvudlöst" CMS.
Valet föll dock på Contentful. De viktigaste förutsättningarna var att det CMS jag valde skulle vara lätt att använda, och att det kunde leverera innehållet till Gatsby via GraphQL. Contentful har ett officiellt plugin för Gatsby som gör det enkelt att hämta innehållet till Gatsby. Och även om Contentful är relativt dyrt, bör du ha ganska mycket innehåll och trafik innan du måste uppgradera från den kostnadsfria nivån.
Autentisering
Vissa områden på bostadsrättens hemsida ska endast vara tillgängliga för inloggade användare. Till det använde jag Gatsbys "Client-only routes". Till skillnad från vanliga Gatsby-sidor är sidor på rutter endast för klient inte statiska, förgenererade sidor. Istället fungerar de mer som en traditionell React-app som körs på klienten. Mer om detta i min nästa artikel, där jag går igenom hur hemsidan är uppbyggd.
I den första versionen av hemsidan använde jag Netlify Identity, som är Netlifys egen autentiseringslösning. Med Netlify Identity Widget är det enkelt att lägga till autentisering, men jag upptäckte snabbt att jag saknade lite mer avancerad funktionalitet. Jag bytte därför till Auth0, vilket i större utsträckning gjorde att jag kunde skräddarsy inloggningslösningen. Auth0 hade också en del funktionalitet som jag behövde för att skapa en användaradministrationspanel, som rollbaserad autentisering.
Dags att börja koda!
I nästa artikel kommer jag att gå in på mer detaljer om hur webbplatsen är uppbyggd, hur jag byggde sidorna som borde kräva inloggning, samt några av de utmaningar jag stötte på på vägen.
Nästa steg:Del 2:En ny webbsida för vår lägenhet. Konfigurera Gatsby och Contentful.
Ta gärna en titt på den färdiga hemsidan här:https://gartnerihagen-askim.no
Projektet är öppen källkod, du kan hitta källkoden på min Github.
Här är en video som visar live-webbplatsen med inloggningsskyddade sidor och användaradministrationspanelen:
Detta är en översättning, originalartikeln på norska finns här:Slik bygget jeg nye nettsider til sammaiet med Gatsby og Chakra UI