Cetip Network

2020/08
logo

Background

I was asked to build a website for the Cetip Network, a social sciences research network. Their old web was a broken WordPress site that was even hacked a few times, so the only requirement was not to use WordPress, and I've had complete freedom with the choice of technologies used.

Development

The old website had many pages with a little or no content, which was something I wanted to change. So, in the beginning, I redesigned designed the website's structure. I decided to merge pages "People", "Visiting Scholars" and "Our partners" into a single page "Who we are" and pages "About us", "Research", "Our mission", "Annual reports" and media became just "About us". On the other hand, there were pages "Projects" and "People", which was just an endless wall of text with incorrectly sized logos and photos, and a very much broken page "Education" with supposedly password-protected downloadable content. To fix all these problems and to make the site more versatile, I decided to go with the attitude that everything is an article.
I decided to use categories (or post types if you want) to differentiate between all these posts - Projects, Annual events, Education/Protected and None.

None is a category for regular articles with no special effect,
Project is an article with extra fields for the duration of a project,
Annual event is a special version of None, but visible only in its special category,
Education is a password protected article shown only in the Education containing links a downloadable content and
People are also just articles, but soem of them have to be tagged as an executive and they have to stay in a given order.

In the beginning I wanted to use Markdown as a format to store articles in, but even though I think it's beautiful and very simple format, other people might not be on the same page as me, so I went with QuillJS as a purely WYSIWYG rich text editor. Thanks to it's awesome simplicity and extensibility I was able to modify it so users can select and insert multimedia content they've already uploaded.

Content uploading was an interesting thing to build which I really enjoyed. To make sure all uploaded content is properly tagged I've built a system that detect's file types like images, videos, audio and other documents based not only on the file's extension and a MIME type, but also by detecting file's magic bytes.

Another thing I enjoyed building was the URL prettyfier since I obviously didn't want to show articles based only their GUID. So for example, when an article's title is Křehký Hrníček I wanted it to look like krehky-hrnicek. This is done by mapping hundreds of characters to a similarly looking ASCII version. To differentiate between other articles with the same title, I've decided to add a very short hash based on some of the other unique properties of an article like GUID, creation time and an author. I chouse MurMurHash, which is a very fast non-cryptographic function that producing a short but (somewhat) unique hashes. The hash is then converted to Base62, which does not contain +, / and = so the URL looks better.

Because I wanted to improve my Angular skills - we were supposed to move to Angular at Alza.cz (altohugh we moved to React later) - so Angular was a natural choice at that time. Today I would choose React I went with .Net Core as a backend since it had a decent integration with Node.js (and NetCore is love). I chose MongoDB as a database for a similar reason. To make sure my code runs everywhere I deploy it using Docker by Docker and docker-compose scripts.

Screenshots

What would I do differently

Aside from choosing React, I would probably switch also to NodeJS. C# is fantastic, but I feel like with C# I tend to write software that has unnecessarily complex architectures, which is not bad, but it takes more time than it would with other languages. Although I'm happy with the result, I had to make some design (UX/UI) changes thanks to frequent requirements changes, and the logo I designed wasn't used in the end thanks to significant administrative requirements we didn't want to go through.