Time Tracking Dashboard | Vite + React, CSS Modules, Dynamic Rendering

Solution retrospective
Aside from being proud of how the app turned out, both visually and functionally, I am proud I took the extra steps of fetching the data dynamically instead of implementing it statically and proud of the fact that I used yet another form of CSS which was new to me, CSS Modules. I'm aware the CSS Modules is basically vanilla CSS but it was nice to have my code more compartmentalized for easier readability and debugging.
Next time I will spend more time analyzing the structure of my JSX (HTML) to ensure I have a proper DOM structure and make applying my styles much simpler.
What challenges did you encounter, and how did you overcome them?I had several small roadblocks with this project but the most notable one would be the early steps of structuring the app. I initially had one additional component called Dashboard and was trying to fit the Layout component inside but in the end I wasn't sure which harbors which, the Dashboard or Layout. Finally, I scrapped the Dashboard component and just stuck with the Layout component and things started progressing so I just stuck with that structure.
What specific areas of your project would you like help with?My primary weakness now lies in the earliest stages of development, deciding which elements I want to break down into components. One example would be the UserProfile component. I wasn't sure whether to include the navbar in there, or create a Navbar component, or just include the navbar in the layout since this is a small project.
Once I gain more experience thinking in React, however, I believe the mental image of the app structure should come more clearly to me and I would have an easier time organizing my files as such. If there are any good resources on how to approach the early stages of app development, please feel free to share! I will also look into this on my own time.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@Fable54321
Ok so first of all, your project looks really good. Your little animations on hover state, made me go back and animate mine because it really adds a little something. Good job.
1st thing Now, looking at your code, it really took me a few minutes to understand how you structured your work.
After a little while I understood what you went after. The idea of having a page folder and a component folder seems good for scalability. I am no expert in react structuring, but to me I feel like if you want to do this, maybe you should separate your components in two category. The ones that are page specific and the ones that might be reusable.
In your case you don't have any components that are directly reusable. To me if your components are page specific, and by that I mean when you have hardcoded content in there, it should absolutely be linked to his page.
Again I'm no expert, I'm sure you are more informed than me on that. I'm just speaking as another coder who looked at your code and had a hard time finding my way. If it was the case for me, maybe it's because I'm dumb, but someone else might be as well ahah.
What I would've done in your case is have a pages folder, inside it a timeframes folder and inside it all the components that are specific to it.
This is also why I choose to balance between scalability and logic when working on projects here. I feel like the way you have worked there would make sense in a project where you have a lot of reusable component. For a component to be reusable, the content in it has to be fully dynamic wich is not the case here and it might take a long while before you even come across building a component that you'll reuse.
2nd thing
So I will go on with some really cool thing I've seen from you. At first when I saw you created an icon object for all the images, I wasn't sure where you were going with it. Then I realized you used it in your map method wich is absolutely beautilful work .
Especially because it led me to another cool thing wich is the fact that you appropriated the json file and modified it to mkae i work better for you. Solid work there !
3rd Now talking about the json I saw you said you were happy with how you dealt with the data. To be fair the way you did worked really well and in the end is extremely similar to what you seem to think you have done, but I have to say you have not fetched the data from the json.
You have only imported it than used it like you would with any javascript variable or functions. Again everything that comes after is the same one way or another so you still did a really good job using that data.
Now when we're talking about fetching data, it means using the fetch function built in javascript (unless you were to use a specific library, but let's not get there.). I wouldn't go and tell your to redo it for this project, but maybe go and watch or read as much thing as you can on the fetch function. The big majority of your project would have been the same, but depending on how you would have fetched the data, you might have come across some issues at the time of deploying, so it is important to be ready for this.
Overall this is a really good looking project, I just had a lot to say about a few little things. Keep going, good job !
Marked as helpful - @Alingggg
Nice work!
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