Skip to content
Submitted over 1 year ago

Time tracking dashboard (Next.js + TypeScript + Tailwind CSS + ESLint)

accessibility, next, tailwind-css, typescript, pwa
Melvin Aguilar 🧑🏻‍💻•61,020
@MelvinAguilar
A solution to the Time tracking dashboard challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi there 👋, I’m Melvin, and this is my solution for this challenge. 🚀

🎁 Features:

  • Tabbed interfaces. 📑
  • Controllable using arrow keys and Tab. ⌨️
  • Tooltip that allows copying statistics. 📊
  • Resemblance with the original design. 🎨
  • Progressive Web App (PWA) support. 📱🌐
  • Small animations with Framer motion. 🎬
  • No errors or warnings using ESLint (Airbnb style guide). ✔️
  • Client-side fetching with SWR to simulate an API. 🌐
  • Custom hooks. 🎣
  • Tested with the TalkBack screen reader on mobile. 📱

🛠️ Built With:

❓ Question:

Not very proud of the prop drilling in the solution. Any recommendations to avoid it? I've tried using the Context API to reduce it, but I don't see much difference.

Any suggestions on how I can improve and reduce unnecessary code are welcome!

Thank you. 😊✌️

Code

Please log in to post a comment

Log in

Community feedback

  • saidi ali•270
    @alihydro

    Excellent solution. Really impressive 👏👏.

  • Mohammed Fakih•1,590
    @javascriptor1

    Hi MELVIN ,

    Excellent solution. Really impressive 👏👏.

    The only issue I noticed is the background color for the 6 main cards is visible on the bottom corners (right & left).

    Take for example the work card. If you notice the bottom corners from right and left, you will see orange colors from the background. It's very slight though, merely noticed by eyes.

    Your solution is perfect indeed. I hope if you have free time to share with us in a writeup how you can produce an exact pixel-perfect solution in such a remarkable way.

    Thank you so much.

  • Yousef•90
    @ousey-ousey

    THAT'S GOOD i noticed that the bottom of number appear last-week and result bur while i use daily or monthly still the word "last week "

Join 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