$ site = new Grafikart (); | Grafikart

After more than a year of development and 2 confinements, the new version of the site is finally online!

Why a redesign

The old version of the site dates from 2014 and was written with Ruby on Rails while I was learning the framework. Also, I tried to implement some technologies that I did not fully understand (like neo4j or elasticsearch) which led to a poorly organized code and a rather unstable structure.

The first objective of this redesign was therefore to write cleaner code that would allow easier evolution of the site and to make the code Open Source so that everyone can participate in its evolution (or watch the code to learn).

The second objective was to update the administration part of the site to make it more efficient and waste less time when creating new content.

A nice back office that makes you want to create new content

What's up ?

A “dark” mode

The first important feature is the implementation of “dark” mode. The entire site has been designed to operate in light or dark mode and by default the selected theme corresponds to that of your operating system (a small button is present at the footer to allow you to change the theme if necessary). This theme is not a simple color inversion, but a real design in order to give you the best possible experience whatever the chosen theme.

A tailor-made dark mode

Automatic progress tracking

In the previous version I implemented a button to mark a tutorial as read. In this new version, the system has been automated in order to allow you to remember the videos that you have finished but also to be able to continue a video that you have started. When you start playing a video on the site, your progress is recorded at regular intervals, and you will have the option in your account to see the videos being watched and resume them whenever you want.

A simplified forum

In the old version, the forums were divided into categories, you had to go to a category to see all the topics. This organization meant that many questions were not necessarily answered. Also, the arrival of the discord chat has reduced the activity of the forum compared to the beginning. Also, I have simplified the organization of the forum to allow you to see at a glance the latest topics that have been posted. This change will speed up interactions to allow people who ask questions on the forum to get more answers.

Open Source Code

This new version has been designed to be open source. The previous version embedded too much sensitive information inside the code and therefore it was not possible to share the code. You will therefore find on the github repository the source code that makes it possible to operate the site but also the recipes used to deploy or work on it locally.

The objective of this repository is not to provide you with a “turnkey” version of Grafikart that you could host, but rather to allow you to see how the code can be organized and to be able to recover certain functionalities if you wish. .

I will just ask you not to use the style and the design;).

Stripe or Paypal payment

A new payment method has been implemented for those who do not wish to use Paypal. The system has also been designed to be able to add new payment methods in the future if necessary.

How it's made ?

I imagine you are also wondering what technologies I used for this new version. I intend to come back to the technical choices that have been made in future articles, but here is a simple list of the technologies that are necessary for the operation of the site.

  • PHP with the Symfony framework
  • Typesense for research
  • Messenger for processing asynchronous tasks
  • Redis for session / cache and asynchronous tasks
  • Mercury for instant notification
  • Nginx for the web / proxy server
  • PostgreSQL for the database
  • GoAccess for statistics


For hosting, I chose to use a dedicated server to better control costs and simplify deployment. Even if I find the principle of micro-services interesting, I think it is too difficult to manage alone (especially when you do not master the tools and the operation of services in the cloud).

However, this server is not a real physical server like the previous one, but it is a server “in the cloud” which allows me to be able to develop its capacities as needed. For this hosting I hesitated between Scaleway, OVH and Infomaniak and it is ultimately the offer of the latter that I chose to use because I was already using their service for my portfolio and my domain name and that I was satisfied with it (the previous server was at OVH but even if I had no problem with the hosting I never liked their dashboard).

I then contacted them and they agreed to sponsor the site by offering its hosting.

The future

Unlike the previous version, the objective of this new version is to allow easier development with new functionalities and new types of content (a lexicon and new courses should arrive).

If you have specific questions or if you would like to see certain aspects of the site explained, do not hesitate to leave a comment that will help guide future articles concerning this posting.

I hope you enjoy this new version and I look forward to seeing you in future videos ^^