Using Notion as a Content Management System (CMS) for your applications

Recently while developing GarajApp, a car magazine app, we had a need to use a CMS to add content such as News, Campaigns and static pages like Guides. We considered several options like Strapi, Contentful or even implementing a simple enough markdown editor with WYSIWYG editor.

Choosing the right CMS

Founder of GarajApp tried using Strapi earlier and it ended up a maintenance burden with updates, errors, and not-so-easy development flow. We needed something simple enough, yet production ready. We just needed to serve some content from our database to the mobile app, how hard it could be?

We were leaning towards implementing a very simple page with a good WYSIWYG editor, perhaps with markdown support, that simply retrieves a page record and updates when we click save. It really looked easy but we had some concerns like adding a login, uploading the photos, managing the pages etc. Ok, so it wasn't so easy, then should we go with a full-scale content management system that supports a looot of things?

During a weekly brainstorming session, we threw the idea of using Notion! Notion has a great user experience when you edit or organize content, it has great permissions and login capabilities, and uploading images is so easy on that. We immediately started doing an end-to-end proof of concept, editing a page in Notion should be reflected in our mobile app within 10 minutes with using GraphQL(with Hasura engine).



Proof of Concept

We first created a page in Notion for News and an example item in it with adding a few columns.


Notion has an API that gives the list of pages and the page content. We used Notion client for JavaScript.

Now we need to run this script and call the API every 10 minutes with cron, can be more frequent if needed, and update the records in the database. Simply upserting the objects in fetchedNews to our news table in our database would be enough. We used Hasura as a backend in this project, so we just called the API with an upsert request with conflict on id field.

Making a GraphQL call to our Hasura engine, and we return the data! Now you can implement a code for transforming this Notion blocks to be displayable elements. You can implement a simple markdown generator or can just directly use the blocks in your code. We moved with implementing a module in iOS that converts these blocks into a display.

Handling the Images

Here's the tricky part, image blocks are returning us URLs that expires. So, if we copy the blocks from Notion directly into our database, our users won't be able to see the images after 60 minutes. To solve this issue, we simply cloned the images to Cloudinary during importing our Notion pages and saving the Cloudinary URL into our database. This gave also a power over the images for us, so that we could implement different versions of the same images easily.

Production ready implementation

To make this implementation production ready, we created 2 main pages like GarajDataStaging and GarajDataProduction. GarajDataProduction's data structure(columns and so on) is changed less frequently and controlled while doing any modification not to have any surprises. We also added Sentry to our script to make sure that our code is not failing. We haven't implemented any monitoring system for the code as the scope was too small, but feel free to include that, too.


Conclusion

It has been a great experience to use Notion as CMS, it's free and it has a great user experience. Simplifying the content management enabled us to develop the application smoothly, we were able to get real data during the development thanks to ease of using Notion. Not to forget to mention, Notion's blocks system gives a powerful yet organizable content with a great UI for modifying the content, which makes it a default choice over using HTML, markdown or a custom implementation.

Popular posts from this blog

Linode, Firewall, Cloudflare Full (Strict) with Terraform Cloud

You built your application and now looking for a way to deploy it with a managed security? You'd like to have a simple yet powerful enough solution that can extend later on? We have an example web server setup in this article that provides you that. At KelebekLabs, whenever we choose to go with a basic server setup, not PaaS or Kubernetes, we follow these principles. Cloudflare Application Security  gives us a lot of services for free , such as DDoS protection, managing bad bots, rate limiting, free SSL certificate and many others. What we need to do is to make sure all the connections to our servers are going through Cloudflare and only . We're going to configure a firewall at our server provider side to make sure we only allow connection from Cloudflare  so that the people who knows our IP address won't be able to bypass our security. You can think this as almost hiding your servers from the internet as Cloudflare will be the only door to your servers. In our example, we...
Read more

How to Communicate Your Process Visually using BPMN as Code

When you have multiple participants in a process, and we often do, you realize that you're dealing with a lot of miscommunication / misalignment issues. It's so hard to remember who was doing what and when, furthermore it's even harder to make some optimization in the process itself as you lose the control over it.  Besides you'll need to group all the participants together for them tell their opinions. Processes are long and complex, but they're there even if you don't formalize them. So, why don't we find a way to approach it in an easy way? First thing each of us would do in such a situation is drawing some boxes and lines, a.k.a. diagrams. Today, we're going to talk about ways of drawing some diagrams, in a comprehensive yet simple way. Business Process Model and Notation (BPMN) BPMN diagram is like Flowchart , but the tasks (activities) are grouped by the participants. It can be drawn / read by both business or technical people as the main purpose i...
Read more

Load Testing with Ruby-JMeter

You're ready for your product's launch, you'd like to show your customers finally there's a solution for their pain. You expect 1000 people using your service per hour, you made all the calculations and somehow you're confident. But, are you? Load Testing is here to simulate the traffic, 1000 people using your service per hour, and increase your confidence on launch day(and after). The story for FolderCode, a temporary file uploading service, was exactly like above, and just to show how it was addressed in its backlog, see the picture below. Designing your JMeter Test Plan JMeter is a well-known tool for load or stress testing, it basically sends requests to your application within the given time, according to the behaviour plan you provided. The plans are designed to be detailedly configurable and focused on load-testing jargon. That makes the JMeter a comprehensive solution, however makes it a bit hard to understand & focus on the well written tests. Here com...
Read more