/time-tracking-dashboard-react

rebuilding the dashboard I previously made with Vanilla JS in React

Primary LanguageCSS

Time tracking dashboard solution

This is a solution to the Time tracking dashboard challenge on Frontend Mentor.

You can view the live site here.

Table of contents

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

My process

Built with

  • React
  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow

What I learned

  • I first created this project in Vanilla JS, then rewrote the code in React. I havn't made a react project for a while so this small project was a good one for brushing of the dust.
  • I gained practice with overlaying elements with CSS Grid and making the dashboard responsive was fairly simple due to the nature of the design.
  • I also got a chance to play with json data and display the data dynamically which is always fun.
  • I encountered a bug with the button components, the buttons where no longer clickable after i had overlapped the grid elements. After some googling I realised that because I had set the z-index to a negative value, so the links were no longer clickable. I corrected the error by simply increasing the the overlaying elements z-index to 2 and the underlying elements z-index to 1.
  • I copied and pasted the CSS from my previous implementation of this project in vanilla JS. I tried to split the CSS into their relevant components. Everything works, but I'm not sure if I'm following best practices. I would like to explore this further

Continued development

  • I used this small project as a stepping stone for a more complicated project I wish to tackle next. Some of the challenges faced in this project are smaller versions of the challenges I will face in that project. e.g. displaying dynamic data and responding to click events etc. -I tried to implement Framer Motion but had some trouble, so I would like to return to this, but probably implement in my next project instead

Useful resources

Author