Frontend Mentor | Time tracking dashboard (Next.js + TypeScript + Tailwind CSS + ESLint) coding challenge solution

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:

Nextjs 13.5.4. ⚛️
TypeScript. 📝
TailwindCSS. 🎨
Framer-motion. 🎬
ESLint (Airbnb style guide). 📦

❓ 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. 😊✌️

Community feedback

Mohammed Fakih• 1,590

@javascriptor1

Posted 7 months ago

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.

Melvin Aguilar 🧑🏻‍💻• 61,440

@MelvinAguilar

Posted 7 months ago

Hello! @javascriptor1

Thank you for your keen observation and feedback. Indeed, during the development process, I observed that slight background color discrepancy on the work card's bottom corners. It was subtle enough that I overlooked rectifying it. I'll ensure this is addressed promptly.

Regarding my workflow, I begin by crafting the HTML structure and prioritize addressing accessibility concerns. Once the structure is robust, I focus on the styling. I generally start by aligning elements and styling them by eye to closely match the design. For precision, I employ an extension named PerfectPixel. This tool overlays the design image onto the developed site, enabling a side-by-side comparison. This greatly aids in ensuring the design implementation aligns almost pixel-perfectly with the original design.

Screenshot.

Thank you again for your feedback!

Mohammed Fakih• 1,590

@javascriptor1

Posted 7 months ago

Great - Thanks for your feedback @MelvinAguilar

Mohammed Fakih• 1,590

@javascriptor1

Posted 7 months ago

Hi @MelvinAguilar ,

Just a question if you please regarding extension PerfectPixel. As you know, all designs on FEM are made for Desktop: 1440px.

What if I don't have a screen size of 1440px? would I still be able to utilize this extension? My screen size is 1366px.

Thanks, MKF

Mohammed Fakih• 1,590

@javascriptor1

Posted 7 months ago

Update : Hi @MelvinAguilar ,

Thanks to your screenshot for the tool, I just noticed that I can use dev tools to set screen width which would mimic a screen of required width. I will give it a try tonight.

Thanks once again. MKF