Skip to content
Submitted almost 4 years ago

Time Tracking Dashboard built in React

Gediminas Makutenas•765
@Senatrius
A solution to the Time tracking dashboard challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Another project I built using styled components and theme provider. It's not perfect, some text appears a little off when comparing it directly to the preview images but I'm sufficiently happy with how it turned out.

When it comes to the code, I'm not too sure if the way I did the switching between day/week/month data and all the prop passing between the components correctly. It works but it just... feels wrong. Maybe someone who's more experienced can take a look and let me know how I could improve.

As always, any and all tips and critiques are welcome :)

Code

Please log in to post a comment

Log in

Community feedback

  • Raymart Pamplona•16,040
    @pikapikamart

    Hey, great work on this one. Layout in desktop is really great and it is responsive as well. The mobile layout looks really great as well.

    Some suggestions would be:

    • I think it will be better if the left side and right side are in their own parent container and not using 1 whole grid. Since those 6 box/cards are a section of their own as well for the person and the selection.
    • Person's img should be using the person's name as the alt like alt="Jeremy Robson". A component like this when a person's name and image are both present, use the person's name as the value as it is a meaningful image.
    • When wrapping a text-content do not just use span to wrap it, use meaningful element like a p tag if it just a regular text or heading tag if it is an heading.
    • For the selections, since you made use of button it would be great to nest them inside a ul since those are "list" of selections and user will have an extra information on how many selections are there in the list. Also it would be great to nest that component inside a section with a screen-reader only heading tag that describes what is that section is all about. Lastly, an aria-live element that announces the changes or announces the selection has been selected, since button only does not give extra information.
    • Another approach for the selections is to make those selections input type="radio"it then will be inside a fieldset along with a screen-reader only legend element that exactly do the same with the screen-reader heading I mentioned above. This way, users will get extra information on what is selected even without using aria-live element.
    • Those decorative images on the site could have use an extra aria-hidden="true" attribute so that they will be totally hidden alongside with the alt=""
    • Since you made the 3 dots interactive using button you should add either aria-label attribute or screen-reader element inside. The value will describe what does the button do.
    • img inside the 3 dots button should be hidden as well using the method I mentioned above.

    Aside from those, the site looks really great and this is a great solution to be honest.

    Marked as helpful

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