Time Tracking Dashboard with editable, stored values (React)
Design comparison
Solution retrospective
This could have been a straight-forward project, but I opted to modify the project for an extra layer of challenge by adding interactivity.
The Daily records/stats can be edited and stored for that specific web browsing session. TO EDIT DAILY STATS: In the daily view, click on the ellipsis icon to open an update form.
The edit/form option is only visible in the daily view, and the project includes logic to make sure total Daily values add up to no more than 24 hours.
If I did start over I would do more pre-planning about managing the state of the app globally rather than at the component level, and design a more elegant form/UI for the update process.
What challenges did you encounter, and how did you overcome them?The decision to make the daily values editable immediately introduced complexity to the project, and I had to learn about how to use the Web Storage API to persist/store updated values.
Theming was also another area I wasn't very familiar with and had to read about. Initially I was aiming to have theming also be decided by a viewer's OS and preferences, but that turned out to be more involved than I cared to explore for this project. But when I do, I'll probably return to update the theming functionality. So for now, it's a hard-coded toggle rather than dynamic switching based on other factors.
What specific areas of your project would you like help with?Given the level of state changing, the app could do with added accessibility. Pointers to good articles/tutorials about how to approach accessibility in React applications would be welcome.
Community feedback
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