Frontend Mentor - Time tracking dashboard solution

This is a solution to the Time tracking dashboard challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

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

[screenshot_1](Screenshot 2023-02-14 at 13.02.21.png) [screenshot_2](Screenshot 2023-02-14 at 13.02.54.png)

Links

• Live Site URL: sanderdechering.github.io/Frontend-mentor_time-tracking-dashboard/

My process

Built with

• VueJS - Js framework
• TailwindCSS - CSS library

What I learned

My first project where I build a vue project and deploy it on a live website. There were a lot of hills to climb, but in the end i managed to deploy a proper looking website.

The main problem I had was making sure the static images i was using with a dynamic url were being added to the assets folder after building.

function getImageUrl(name: string) {
  return new URL(`../../images/${name}`, import.meta.url).href;
}

A different problem was how to deploy a build inside a dist folder on github pages. There was one tutorial that helped me get it done (link in usefull resources). Vite also explained how to do it, but I did not get the script they provided to get working.

Useful resources

• Vite asset handling - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
• Dist with build on Github pages - This tutorial helped me get the project running on github pages.

Author

• Website - Sander Dechering
• Frontend Mentor - @sanderdechering