Responsive Time Tracking Dashboard using ReactJS & TailwindCSS

🙋‍♂️ Hello, Everyone,

Here is my solution for the Time Tracking Dashboard.

• Scored 94% on Google Pagespeed Insights! 🤩
• Built with ReactJS | Designed with TailwindCSS 🛠️ | Mobile-First approach 📱
• Utilized prettier-plugin-tailwindcss to auto-sort TailwindCSS classes 🎨
• Implemented JavaScript's inbuilt fetch API to make calls to internal JSON data ⚙️
• Utilized BEM principles to create a consistent structure of TailwindCSS classes
• Minified the CSS files to improve site performance 🚀

Learned one important thing when injecting SVG's through inline-CSS dynamically:

• Sometimes your SVG will be inlined by React so you need quotes around it:

backgroundImage: `url("${Background}")`

• otherwise, it's invalid CSS and the browser dev tools will not show that you've set background-image at all.

Reference: Mattia Righetti's answer on StackOverflow

Do you know a better way to deal with using SVG's as a background image❔

I'll be happy to hear them. 🤓

Code Together | Learn Together | Grow Together