Frontend Mentor - Time tracking dashboard solution

This is my solution for the Time tracking dashboard challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Switch between viewing Daily, Weekly, and Monthly stats

Screenshot

Links

• Live Site on Netlify
• Solution Page on Frontent Mentor
• Code on Github

My process

Built with

• TypeScript
• Web Components
• Vite
• CSS custom properties
• CSS Grid
• Mobile-first approach

What I learned

When looking at this challenge, I immediately knew that reusable components in some form would be helpful. At first, I thought about using a Frontend Framework like React or Svelte, but then I thought, why not learn something new. So I decided to look into Web Components.

It was an interesting experience and reminded me of the convenience of classic web frameworks. In many moments I thought about possible utility functions or classes around the API to improve the workflow for more complex projects. I got to understand why frameworks like Lit exist and was reminded of a quote by Fireship in his Video: I built the same app 10 times: "The last thing the world needs is another JavaScript framework".

One utility function I wrote is to import components into other components. Out of the box, a web component has to be defined once via its class and then is used via the tag name, which does not provide type safety or a traceable import tree. This is what I came up with:

export type CustomElementTagName = `${string}-${string}`

export function createNode(
  elementTagName: CustomElementTagName,
  elementClass: CustomElementConstructor
) {
  // define the custom element in the DOM so it can be used
  window.customElements.define(elementTagName, elementClass)

  // return a function to create an instance of the custom element
  return () => document.createElement(elementTagName)
}

Useful resources

• 'Web Components Crash Course' by Brad Traversy on YouTube - This tutorial helpd me kickstart my Web Component knowledge

Author

• Frontend Mentor - @Jak-Ch-ll
• Github - @Jak-Ch-ll
• linkedin - Jakob Chill