For the final part of my Software Development Apprenticeship I’ve been working on a new website for Common Knowledge. Common Knowledge makes digital tools to help social movements build power. They needed a new website that could be updated with a CMS and could better display the range of work that the co-op does.

Common Knowledge Website Screenshot

Website stack 🥞

Wagtail CMS 🦜

I built the site with Wagtail which is an open-source content management system (CMS) built on the Django web framework. I chose Wagtail for this project because it has a user-friendly admin interface that makes it easy to add and update content. It is also fully customizable and extensible with a range of packages and plugins available and an active developer community. Wagtail also inherits Django’s built-in protection from common security vulnerabilities in web applications.

Tailwind CSS 💅

For CSS I used Tailwind which helped speed up the development process as it gave me access to thousands of in-built utility classes that I could add directly into my HTML. I set up a Tailwind configuration file where I declared values for colours, a type scale, fonts, and breakpoints. This helped me to quickly apply a consistent design and visual style to the site.

Stimulus JS ⚡

I used Stimulus which is a lightweight JavaScript framework to add small reusable snippets of JavaScript into the HTML templates I already had with Django. I avoided using a framework like React because it would add an unnecessary amount of files for what would be a relatively simple functionality.

What went well ✅

These are some of the highlights from the project:

Biggest challenges 🚨

There were, of course, bugs and challenges throughout the project:

Future improvements 🔮

Although my full-time work on this project has come to an end there are some improvements I would like to make in the future. One of these is to theme the CMS admin interface with the Common Knowledge brand colours. I would also like to add an option for the visitor to select a colour scheme that provides a higher contrast than the default. Lastly, there are definitely performance improvements I can make by replacing jpeg images with WebP formats and caching static content.