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.
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
- Solution URL: https://github.com/fpellicero/time-tracking-dashboad
- Live Site URL: https://quirky-keller-39ad1f.netlify.app/
- React
- TailwindCSS
- Vite
My main goal tackling this challenge was to try TailwindCSS and working with utility classes. In my day to day job, I usually work with either styled-components or SASS and BEM convention, and I'm not really proud of either of those... Tailwind uses a drastically different approach, which I was very skeptical of, and I thought I should try.
I also decided to try to use Vite instead of Webpack, just because it has gotten a lot of attention lately.
To my surprise, I really liked working with Tailwind and it's utility classes. Even without being familiar with all the terminology and class names, I think I solved the challenge quicker with Tailwind than I would have with regular CSS (which I'm familiar with)... and that's amazing.
- Website - Francesc Pellicero
- Frontend Mentor - @fpellicero
- Twitter - @fpellicero