Open Systems website

Visit https://opensystems.sg/ to see website.

My role involves continuing development from the previous developer (Syahrul), including integrating DatoCMS. This allows SAM staff to structure pages, and folders, and manage content independently without needing a developer. I also had to figure out the CI/CD pipeline to trigger build from DatoCMS to the website hosted on Microsoft Azure Static Web App

The DatoCMS integration involved designing the CMS schema, types, fields, and pages on DatoCMS platform, and mapping the data structure to the actual website on the backend side. I chose static generation for optimal site performance, as the site functions more like a blog without real-time data transfer. Hence, the data will be fetched at the start of each build into individual .JSON files, and then passed into the build. The tech stack primarily includes Node.js, Next.js, and GraphQL.

I wrote a script in Node.js to handle the data fetching, manipulate the data (like slugify), and write them into multiple .JSON files. Why don’t I use Next.js? Because the previous developer used page router for Next.js and I didn’t really know if my app router knowledge could be applied to this. That’s why I wrote the script independently to the Next.js structure.

The CI/CD pipeline is customized for staging and production site, with caching for dependencies package to save time on the build time, and handling of concurrent builds. For the trigger request, I used webhook to link the CMS to the hosted server via github actions.

Besides backend, I also had to restructure and refactor the front-end so that the data can be populated properly with correct types. Since the previous front-end developer didn’t optimize the code in a way that data can be spread out, it was quite a tiring time for me to do this process.

• Currency Design for creative direction and graphic design
• Syahrul Anuar (SERIAL CO_) as front-end developer
• Bao Anh as back-end developer and front-end maintainer
• Ernest Wu (SERIAL CO_) as project manager
• This work is done for Singapore Art Museum