siavhnz / time-tracking-dashboard

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

Frontend Mentor - Time tracking dashboard solution

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

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Work time
  • Built with
  • Useful resources
• Author
• Acknowledgments

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

• Solution: frontendmentor.io

• Live Site: cloudflare

My process

• 1.Download assets, Install Vite & TailwindCss, Initialize git, README.md, Prepare project, ...
• 2.Create components
  • 1.Identify component
  • 2.Create components + style + functionality if exists
  • 3.go to step 1 (Identify component)
• 3.Prepare and Publish(4.Write README.md, Push to github, Make it live on Cloudflare, Publish to frontendmentor, ...)

Work Time

• My Clockify Report

Built with

• React
• TailwindCss

Useful resources

• Importing SVG files as React components with Vite

Author

• Frontend Mentor - @siavhnz

• github - @siavhnz

Acknowledgments

Thanks To

Frontendmentor.io - for their Excitement challenges

Perfect Pixel - for such a great extension