Web pages for a condominium built with Gatsby, Chakra UI, Contentful and Auth0

This is the full (open source) source code for the web pages I have built for my condominium, complete with protected routes in Gatsby and a user admin dashboard built with Gatsby Functions and Auth0 Management API.

I have written about the project in a 6 part series at Dev.to: Part 1: How I built our condos's new web pages with Gatsby and Chakra UI.

The original Norwegian articles are published on my personal web site, www.lekanger.no

Some of the Norwegian articles are published on Kode24.no as well.

If you have suggestions for improvements, or find any bugs, please feel free to use the issues tab, make a pull request, or just send me an email at kurt@lekanger.no. I'm also at Twitter.

The rest of this will be in Norwegian... :-) <br /> <br />

Webside for Boligsameiet Gartnerihagen

Nye nettsider for Gartnerihagen Boligsameie, laget i Gatsby/React med Chakra UI. Innholdet hostes på Contentful, og bygging trigges hos Netlify når nytt innhold publiseres på Contentful (via "build hooks").

Les mer om prosjektet på lekanger.no og kode24.no:

• Del 1: Slik bygget jeg nye nettsider til sameiet med Gatsby og Chakra UI
• Del 2: Slik bygget jeg sameiets nye nettsider. Grunnmuren er på plass
• Del 3: Slik bygget jeg sameiets nye nettsider. Autentisering og private ruter i Gatsby
• Del 4: Slik bygget jeg sameiets nye nettsider. Kontinuerlig utrulling til Netlify
• Del 5: Slik lagde jeg et brukeradmin-panel med Gatsby Functions og Auth0
• Del 6: Brukeradmin-dashbord med Gatsby Functions: Oppdatere, opprette eller slette brukere

Du finner de ferdige nettsidene på https://gartnerihagen-askim.no

Teknologivalg

Backend

• Hostes på: Netlify
• Innhold hostes i: Contentful
• Gatsby Functions for å lage API-ene som brukes av brukeradmin-grensesnittet

Frontend

• React.js / Gatsby

  • https://www.gatsbyjs.com/

• CSS

  • Chakra UI themes / Emotion
    • https://chakra-ui.com/docs/theming/customize-theme
    • https://www.gatsbyjs.com/docs/how-to/styling/emotion/

• Chakra UI for brukergrensesnitt

  • https://chakra-ui.com/

• Animasjoner med Framer Motion

  • https://www.framer.com/api/motion/
  • https://chakra-ui.com/guides/integrations/with-framer

• Auth0 for autentisering

  • https://auth0.com/

• Apollo Client for å hente data når man er på "protected routes" (client only routes)

  • https://www.apollographql.com/docs/react/
  <br />

De endelige nettsidene ser slik ut:

<p><img src="https://cdn.sanity.io/images/ajget05d/production/29266dc61307f5bec95920f50992972b268bb69e-2348x1646.png?w=800" align="left"/></p> <p><img src="https://cdn.sanity.io/images/ajget05d/production/b642125dad606f0e695ad8892d376cea733f3d11-1600x900.webp?w=800" align="left"/></p>