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

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

Extended requirements:

• User should be able to switch between Dark and Light theme mode
• UI theme should be initialized based on the user's system preferences
• User should be able to reset the current streak on the selected period
• User should be able to reset the previous streak on the selected period
• User should be able to reset the whole streak on the selected period

Screenshot

Dark theme

Light theme

Links

• Live Site URL: https://revuwem.github.io/time-tracking-dashboard/
• Solution URL: https://github.com/revuwem/time-tracking-dashboard

My process

Built with

• Vite - build tool
• React - components
• Typescript - types
• TailwindCSS - styles
• Redux Toolkit - state management
• usehook-ts - hooks
• Desktop-first workflow

What I learned

What I learned:

• how to implement React dot notation pattern for reusable components
• how to use Redux Toolkit to implement state management
• practice Typescript
• how to implement dark/light mode switch using React and TailwindCSS
• how to implement custom animations using TailwindCSS
• how to implement styles considering motion and appearance user settings
• how to implement delay in fetch requests

Continued development

Concepts I am still not completely comfortable with or techniques I found useful that I want to refine and perfect:

• reusable components best practices
• accessibility best practices

Useful resources

• Redux Toolkit Quick Start - Great official Redux Toolkit quick start tutorial
• prefers-reduced-motion: Sometimes less movement is more - Great article about why reducing motion is important and how to implement it
• How to Create Dark/Light Mode with React (Tailwind Styling) - Article which helped me to understand how to implement theme switch
• Class detection in-depth - Tailwind official docs explaining how to work with dynamic classes

Author

• Website - revuwem
• Frontend Mentor - @revuwem