We have thousands of small and large condominium associations and housing cooperatives in Norway where I live, and common to them all is that they often need a place to publish information to their residents. But many small condos do not have large budgets to develop their own websites.
I'm a board member in a small condominium with 21 sections, and until recently we have managed with nothing more than email and a Facebook page to get information out to the residents. The plan was to continue like that - until a newly moved-in neighbor came over and asked why we did not have a website where he could find useful info. And why not? I just had to figure out how we could build it without spending too much money.
The cheapest solution was of course to build everything myself.
I am a self-taught developer who have been coding in JavaScript and React for a few years, mostly on a hobby basis. Just before Christmas 2020 I came across a new component library called Chakra UI which promised making it easy to create great looking user interfaces without having to build everything from scratch.
After playing a bit with Chakra UI a few weekends and late nights, I decided to make something useful - instead of just another test website (or to-do app, God forbid). Maybe it was possible to create and operate a new website for the condo completely free of charge? I had to give it a try.
The result was a quite performant website that does not cost the condominium a penny to run - except for the 120 kroner (~12 euro) a year for the domain https://gartnerihagen-askim.no.
This is how the front page of the finished web site looks like:
Separate area for logged-in users
The purpose of the web site was first and foremost to give the residents a place to find useful information for residents only. But the web site should also promote the condo and the neighbourhood for potential home buyers.
I like to have a plan before I begin, so I started drawing a few sketches and wireframes with my favorite tool for these things: Figma.
The front page should be accessible to everyone, but it was also necessary to keep some content behind a login:
This is how the pages for logged in users look like:
Technology choices
I wanted the new web site to be as user friendly as possible, while also being lightning fast and using best practices in modern web development. I wanted to use functional and reusable components in React.js with "hooks" that lets me handle state easily.
I also decided to use TypeScript to reduce the risk of bugs when passing props down to variuous components - but also because using TypeScript gives me incredibly useful information in VS Code during coding:
Languages and frameworks - frontend
I decided quite early in the project to build the web site using the React framework Gatsby. I also considered using Next.js, but I had much more experience with Gatsby and then it also became the natural choice for me.
One of the benefits of Gatsby is that you get websites that are extremely fast. Gatsby creates static HTML pages that are very well optimized, including best-in-class optimization of images (which has become even better with Gatsby 3.0). It is also easy to create web pages with great SEO (search engine optimization).
To speed up the process of making a nice user interface, I chose Chakra UI. With Chakra UI, you also get a number of bonus benefits, such as compliance with WAI-ARIA standards for accessibility, and that you can customize your own themes for your website. This means that you hardly need to write any CSS at all, but can define color palettes, fonts, distances and more by expanding the default theme (which already looks very nice).
Chakra UI also makes it easy to create responsive websites, in fact without having to write a single media query.
Backend
When it came to where I should host the site, the choice stood between Gatsby's own Gatsby Cloud , or Netlify. I decided on the latter, as little traffic and the modest needs of the condominium would make it possible to run the website on the free tier.
Getting a Gatsby website up and running on Netlify is as simple as pointing Netlify to the code repository in Git. As soon as I push new code to the project's main branch on Github, Netlify automatically runs a new build of the site.
For publishing content, I wanted a headless CMS solution. I considered both the Norwegian headless CMS solution Sanity and headless Wordpress, as I had experience with both. For example, my personal website lekanger.no uses Sanity, while Wordpress has also come a long way as a "headless" CMS.
However, the choice fell on Contentful. The most important prerequisites were that the CMS I chose should be easy to use, and that it could deliver the content to Gatsby via GraphQL. Contentful has an official plugin for Gatsby that makes it easy to source the content into Gatsby. And although Contentful is relatively expensive, you should have quite a lot of content and traffic before you have to upgrade from the free tier.
Authentication
Some areas on the condominium's website should be accessible to logged in users only. For that I used Gatsby's "Client-only routes". Unlike regular Gatsby pages, pages on client-only routes are not static, pre-generated pages. Instead they work more like a traditional React app running on the client. More about this in my next article, where I go through how the website are built.
In the first version of the website, I used Netlify Identity, which is Netlify's own authentication solution. With Netlify Identity Widget it is easy to add authentication, but I quickly discovered that I missed some more advanced functionality. I therefore switched to Auth0, which to a greater extent allowed me to tailor the login solution. Auth0 also had some functionality I needed to create a user admin dashboard, like role-based authentication.
Time to start coding!
In the next article, I will go into more details about how the website are built, how I built the pages that should require login, as well as some of the challenges I encountered along the way.
Next step: Part 2: A new web page for our condo. Setting up Gatsby and Contentful.
Feel free to take a look at the finished website here: https://gartnerihagen-askim.no
The project is open source, you can find the source code at my Github.
Here's a video showing the live site with the login protected pages and the user admin dashboard:
This is a translation, the original article in Norwegian is here: Slik bygget jeg nye nettsider til sameiet med Gatsby og Chakra UI
Top comments (0)