Dados Abertos Front-end Project

A interface that consumes data from the Ckan API

Front-end Design
❮ Ricardo Ireno Portfolio

This project aims to be a more customizable interface for queries in the Ckan tool. CKAN is an open-source DMS (data management system) for powering data hubs and data portals. CKAN makes it easy to publish, share and use data. It powers hundreds of data portals worldwide. Unfortunately, customize CKAN appearance can be a bit hard. For this reason, a developed this project.

Typescript logoNext logo

Ckan

Ckan is a technology developed in Python, and little of another technologies including HTML, Javascript and CSS. It also use Jinja, a templating syntax inspired in Django, Bootstrap, and Jquery.

Ckan provides a API for consuming your data with many options of interaction.

Know more about Ckan

Logomark

Logo guidelines and concept Logo guidelines and concept

I made this logo following a concept of a simple forms but strong mood. The ‘A’ of the word ABERTOS, OPEN in English, with and aberture and a square symbolizing a dice. DICE in Portuguese is DADO. A little pun.

The logo and a variation:

Logo finished Logo finished
Variant idea Variant idea
Colors variants Colors variants

This is a example showing Ckan page with a negative variant of the logo:

Negative example in Ckan's page Negative example in Ckan's page

Frontend proposal for this project

Because the increasing of this amount of technologies together, and because a preference for separating the view layer from other layers, I believe that the Javascript Ecosystem provides a good alternative to deliver a customizable frontend. I developed this concept using Next.js, Typescript and Stitches for styling. Stitches provides a agnostic way to use CSS-in-JS, I’m enjoying using it.

Image of the site running Image of the site running

Final considerations

Both the logo and de frontend has not been taken forward, but my work is available in Github, and you can see the current website on https://dadosabertos.unifesp.br/.

Visit the repository on Github

Thanks!