The Unikoo website dissected

Every business manager or marketeer who comes to Unikoo has different needs or a different vision for their website. Using our technical skills, we translate these needs into a responsive website that does what it's supposed to do.

The needs for the Unikoo website? It has to be visually appealing, user-friendly, and easy to add new content. But what is the best approach then? Much knowledge, experience, and lessons from past projects came together while creating the Unikoo website. Building a website is, above all, a succession of thoughtful technology choices. That is why in this blog post, we sharpen the virtual dissecting knife to have a better look at our Unikoo website.

For Unikoo's services, we have already used many different technologies to help our customers. Think of Craft, Angular, and React. Each system has its strength, but choosing is inevitably losing. That's why we wanted to take a different turn for this project. We wanted to create a stack, a bundling of technologies that can work together perfectly and efficiently deliver the best result.

We had used Craft CMS en website vizualisation through Twig (the standard way to visualize webpages in Craft) for several customers. Craft already provides quite a lot of opportunities, but with the size of our new website and this amount of in-house expertise available, we wanted to aim higher. In other words, the sky is the limit.

That’s why we decided to combine some new technologies. Based on our expertise, we soon agreed to combine Craft as a content management system (CMS) and a React-based front-end framework. This way, we could use Craft’s incredible user-friendliness to manage all of our content, backed by the power of React to visualize it all. Furthermore, this allowed us to fully tailor our front-end with many extra possibilities, such as log-in systems and complex web forms. Besides, it also allows us to build the website through components that are easy to re-use, enabling us to work more efficiently. Furthermore, we took this opportunity to test the promising Nextjs framework.

To sum up, we used a headless CMS combined with GraphQL, API, and Nextjs. The perfect foundations for a modern and advanced website.

We dropped the bomb already: Craft recently launched their headless service. This means they offer their back-end system as a service even if you don’t use their front-end system. They do this by enabling GraphQL as standard functionality in their pro-license, allowing other systems to consume and visualize the content from Craft. This dynamic approach to gathering data replaces the classic API and will enable us to work on our content without affecting the front-end. In other words: if we add entirely new content, our front-end won’t break, so we can continuously build on our existing website.

For our front-end technology, the decision was easy to make: React. For us, the biggest downside to React is that it performs poorly on SEO (Search Engine Optimisation). If Google searches the contents from a React page, the crawler (Google’s bot) gets an empty page. Luckily, there’s a solution to his problem: Server-Side Rendering (SSR). SSR receives the data from our servers and sends the whole page to the browser. This way, Google gets to see the same content any user would. Of course, we didn’t have to start from scratch to set up this Server Side Rendering. Multiple frameworks can help you with this; we opted for Nextjs.

One of the most significant advantages of React is that it works component-based. This allows us to divide web pages into several pieces that can be used separately. We have a few components that we re-use all the time. Think of the header or footer, buttons, or call-to-action banners. They have the same layout but a different background color. Because we are in complete control of the CMS and the front-end, we could match this perfectly. In CMS, we created a CallToActionBanner that has a title, subtitle, call-to-action, and type. This way, the front-end always knows which component to render with what text.

The setup of our new website allowed us to use the latest technologies to the fullest. We are proud of the results! Are you in need of a new website, or do you have any questions concerning our approach? Feel free to contact us. We’d love to help!