For a research project at the University College I work for, I had to build a web application. The goal of the web app was to provide high school language teachers with a theoretical framework, tools and practical examples for applying formative evaluation in their classes.
A Headless WordPress
The content for this web app is very hierarchical: 3 main themes contain 4 subcategories each, and every subcategory contains between 1 and 9 cards (‘fiches‘).
These cards (practical examples of techniques for using formative evaluation in the classroom) would all have a similar, template-like structure and. The researchers had to be able to insert the content autonomously and gradually, over a period of an academic year. So there was need for a CMS with a customizable admin interface, and I choose WordPress for the backend. It was pre-Gutenberg era, therefore I used ACF to create forms for a custom content type card (‘infofiche’). Because I did want a SPA-like experience on the front end, I decided to use WordPress as a headless CMS. Relying on the WordPress Rest API, I made a few custom endpoints for the custom content types.
Nuxt JS for the frontend
For the frontend, I used Nuxt JS, a framework based on Vue JS. Nuxt allows you to build SPA-like apps, without the disadvantages that come usually with SPA’s: slow initial load and poor SEO. With the ‘nuxt generate’ command, you can generate a static (pre-rendered) website. I deployed the site on Netlify and linked the install to my github repo and to a webhook I created in my WordPress backend. Whenever I make code changes, or the editors make content changes, the install on Netlify is rebuild, so that it always is up to date.
Visualization with D3
A specific requirement was that site visitors could page through the cards, and access them via the hierarchical way. Since the hierarchy was so important with respect to the content, the navigation had to reflect it at all times during user interactions. But the researchers still felt that the content structure wasn’t clear enough, and asked for a graphical representation of the hierarchy, which would also reflect the navigation. Therefore I created an interactive dendogram with d3. I learned a lot during this project, and it was great fun! You can see the end-result here: https://formatiefevalueren.kdg.be