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
  • Continued development
  • Useful resources
• Author

Note: Delete this note and update the table of contents based on what sections you keep.

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
• Use URL for routing to the various views

Screenshot

Links

• Live Site

My process

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• React Router - For routing
• CSS Modules - For styles

What I learned

• I learned how to dynamcially importing SVG files into a Component. In previous projects, I added SVG or images directly but in this project, I had to dynamically import images using a dynamic URL.

const [icon, setIcon] = useState(null);
  ((name) => {
    import(`../images/icon-${name}.svg`).then((icon) => setIcon(icon.default));
  })(iconName);

  if (icon) {
    return icon;
  } else {
    return "Icon not found";
  }

Continued development

• Add Form to record tasks and hours

Useful resources

• Import image dynamically in React component - This helped me to dynamically import the svg icons. I really liked this pattern and will use it going forward.

Author

• Frontend Mentor - @joshuaadu