Submitted 12 months ago
Responsive Time Tracking Dashboard using ReactJS & TailwindCSS
@IamArshadAli
Design comparison
SolutionDesign
Solution retrospective
🙋♂️ Hello, Everyone,
Here is my solution for the Time Tracking Dashboard.
- Scored
94%
on Google Pagespeed Insights! 🤩 - Built with
ReactJS
| Designed withTailwindCSS
🛠️ | Mobile-First approach 📱 - Utilized
prettier-plugin-tailwindcss
to auto-sortTailwindCSS
classes 🎨 - Implemented JavaScript's inbuilt
fetch API
to make calls to internal JSON data ⚙️ - Utilized
BEM
principles to create a consistent structure ofTailwindCSS
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
Community feedback
- @Aniket200-indPosted 12 months ago
Great Work! Got inspired from your project and I am also doing this project using nextjs and tailwind. You have done it very well!!
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord