Introducing Dokoo: Headless CMS for E-Commerce
Tags: jamstack, vue, javascript, webdev
Published: 2022-02-17 16:51:37

I'm really glad to introduce [Dokoo](https://app.dokoo.io). A headless CMS that we built and use in our every day life as e-commerce merchants. 

We couldn't find any headless CMS with built-in functionalities that we needed for e-commerce like bulk update on entities.

We also use a new way of exporting the data using a feed builder. Think of it like a reversed GraphQL API where you choose which field to export in which feed. 

Working with Dokoo has been a real breathe in our organisation and we hope that you will find some value in it for your usecases.

# What is Dokoo?

Dokoo is a headless CMS. 

> *[The term "headless" refers to removing the dependency of knowing where data will be displayed and instead just holding the data to be used wherever the developer chooses. This is often used to describe a CMS where content can be entered, held, then where and how that content is displayed is decided separately.](https://jamstack.org/glossary/headless-technology/)*

# How it works

## Data Model

The goal of Dokoo is to administrate data on one or multiple objects named entities. Entities belong to a certain type of object named Custom Types. Each Custom Type uses multiple Attributes to define an entity.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ljq9zoqzs39mqdirmoy0.png)
 

<aside>
🎯 If you are creating a Blog with Dokoo, you will create a **custom type** *Article*, that would have the **attributes** *title, content*. You would then create a new **entity** of type *Article* to write a new article.

</aside>

## Administrating Data

Dokoo provides an easy to use User Interface to allow content editors to create and update entities. 

After custom types and attributes have been defined, content editors can create entities and issue **commits** over them. Commits are a **single unit of data update**. It means that even if you update 100 entities at the same time, the action of doing it is represented by a single commit.

Every commit is non destructive. It means that the updated data is never erased. 

## Exporting Data

Dokoo allows you to configure feeds, that will expose your data to the outside world the way you want it. Think of it like a reverse GraphQL API. It's not the client who choses the field, it's the content administrator that choses which field to expose to who.

# Example

## Space Creation

After logging in to the Dokoo user interface, we can create a space clicking on "Create a new Space" and providing a new space name. 

Once the space has been created, we get on the space dashboard


![Image description](https://cdn.dokoo.io/cb1aa24b-66d6-4556-ac3f-7bffe7ca1b87)

This page is a recap of all the important informations that define your space. As you can see, at the moment, we have 0 Custom Type. 

## Custom Type Creation

Let's go ahead and create one by clicking the "+ Create" button:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jk63t9vus08q1uz46hp0.png)

For this example, we will name our Custom Type *Blog Articles*.

We'll be creating a custom type using the *Basics template*. This template automatically creates two attributes: *Title* and *Image*. 

## Entity Creation

After confirming the custom type creation, we get on the custom type recap:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wv1h243d44dddj0wzcsr.png)

We click on "+ Create" to create a new entity. This will get us on the entity editor page:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h1p5ps33x84coo93xobr.png)

On the right, we have a list of available attributes for this type. We can attach one attribute to our entity or add them all by clicking on "Add All". This will add the appropriate inputs on the Entity Editor:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kw460ubhsihdqrptlnbg.png)

We just have to click on "COMMIT" on the right to save our changes. 

## Exporting Data

To export data, we have to go back to the main page of our **Blog Articles** custom type and click on the Feeds icon:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2gct99g29f4ihrhow7xl.png)

We can create one or multiple feeds for a specific custom type. Let's go ahead and create one by clicking on "Create Feed":


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1m24v4ryejv4i2y7ky09.png)

After creating "My main export" feed, we get on the feed editor page:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ek4uwup4enj0i05xacsj.png)

On the left, you'll find the feed editor. On the right, you'll find a preview of your feed and instructions to integrate your feed.

To add data to your feed, we click on "Add Data". A popover asks us if we would like to choose between a native field or an attribute field:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rfh6dttw753cq5pdajha.png)

A native field is either the ID of an entity, its custom type id or the incremental ID of the entity. An attribute field is the value of attributes defined on the entity editor.

Let's go ahead and add the `incremental_id` and the `title` attribute:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dpf198vv56l22p7q1cws.png)

After adding the feed fields, the preview shows our beautiful feed, ready to be consumed by other services on the internet:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fbfcp9oil8r0vv42p4fr.png)

## Some details if you're interested

The application you are seing has been built with NuxtJS and Vuetify. So we thank them a lot for their work that allowed us to create this.

Hit me a message in the comments if you tried it or want to try it. This is the first time we post about it on the internet!

Give it a try at [https://app.dokoo.io](https://app.dokoo.io)

I also wrote two articles if you want to discover how to use it with real use cases:

- [Minimal Dokoo Blog Example
](https://dev.to/elmatella/minimal-dokoo-blog-example-3anl?preview=a44170682e9a34761fb0b237a995a2603150dabd22db1b5cedbdc3043c2111aa50522f69e92f05fe9b4e19791d97e2ec8215dfed7b75d5013542d130)
- [Snipcart and Dokoo minimal E-Commerce
](https://dev.to/elmatella/snipcart-and-dokoo-minimal-e-commerce-2m80-temp-slug-2581161?preview=8fd104b1693f26fa22da8e9e7e545efcae1ac58212f3f6b3800c1013a21814bf54ab7aae8ad937c939794df9bc077960255f4a86b6243b34362b55bd)