Headless Frontend Prototype

This project involved developing a prototype for a headless front-end solution for a company website, created in collaboration with Kruso A/S as part of my final exam project in web development studies.

Project Overview

The prototype was designed to provide a modern, responsive design and user experience. It was built using Vue.js and Nuxt.js for the frontend, styled with Tailwind CSS, and developed with JavaScript and TypeScript. On the backend, technologies such as .NET, C#, Azure, and Umbraco CMS were used to support content management and dynamic data.

The goal was to strengthen the company’s existing brand values and attract users by providing them with greater insight into the products and services offered. Key features include product sliders, tabs, and a search function — all integrated to enhance user engagement and improve accessibility across devices. The platform focuses on clearly communicating the company’s core values while offering an intuitive and user-friendly digital experience.

Design Process

The design phase was supported by Figma, which I used to create interactive prototypes and gather design input. This allowed for early visualization of the user interface and helped ensure alignment with the client’s expectations before development began.

There was a clear goal to retain the company’s existing brand values while incorporating new visual elements inspired by other sources to refresh the look and feel. This approach ensured the platform stayed true to the company’s identity while embracing modern aesthetics

the company's Image

Learning Experience

This project gave me the opportunity to work with new technologies such as C#, .NET, Azure, and Umbraco CMS, significantly broadening my technical skills. I collaborated closely with other developers and a project manager, gaining valuable experience in teamwork and communication.

Working agile taught me to coordinate through standups, code reviews, and Gitflow. The hybrid setup, including time at a Copenhagen office, enhanced my adaptability and exposed me to a new work culture.

the company's Image

Technologies Used

  • HTML
  • TAILWIND CSS
  • VUE
  • NUXT
  • JS
  • TS
  • .NET
  • C#
  • UMBRACO CMS
  • FORK
  • GIT
  • AZURE
  • FIGMA