Time Tracking Dashboard | Vite + React, CSS Modules, JSON Data Fetch
Design comparison
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.
Community feedback
- @Fable54321Posted 5 days ago
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 helpful1@psychederikPosted 4 days ago@Fable54321 I will start my response from the bottom up.
You are absolutely correct, I did not fetch data but simply imported the json array of objects. I have coded with fetch() and async functions in the near past and realize the difference more clearly now so thank you for pointing that out.
It really means a lot that you inspected my code so thoroughly. I'm still relatively new to React and coding in general so having someone really take the time to read the code I wrote is new to me as well. That being said, I'm sure there are more succinct ways of accomplishing what i was going for but I'm excited you found my approach viable.
As far as the file structure of my project, I am aware its way too compartmentalized for such a small project and perhaps incorrectly so. I was aiming for a structure that a much larger project might adopt, just for practice' sake. I'll have to check what a timeframes folder looks like and when they are used, I've not yet come across that use-case but I will look into it.
Honestly, I am thankful you took the time to share your thoughts. I really appreciate your compliments and critique. You gave some great insights and extreme motivation to keep coding. Also, I'm glad you liked the icon animation. I was hoping someone would notice 😅
1@Fable54321Posted 4 days ago@psychederik No worries, I love digging into code exactly for projects like yours. You say you are fairly new to react, yet there is a few things I thought were really clever and wouldn't have thought of that approach myself !
Might look at some other projects of yours in my spare time if you would like !
1@psychederikPosted 3 days ago@Fable54321 Absolutely! I will always be open to code reviews.
I looked at your Time Tracking project yesterday and you seem to have a fair bit of experience with React or programming in general. How long have you been coding and which languages were your primary focus?
I haven't used Sass yet, it seems somewhat intimidating or at the very least requires some learning effort which I'd rather invest into React at this time. Also, I have not worked with React Router yet so between that and SCSS i couldn't grasp the full approach of your code yet.
0@Fable54321Posted 3 days ago@psychederik Sass is actually fairly simple, but just like with react, you'll find your own preferred way of organizing your file and this might be the most complicated part of it.
Personnally I have really dug into react before attacking sass, so I think you might have the right approach. I don't really use sass for that many things that you can't do with regular css, but I like how you can nest your selectors and it looks really clear and clean.
In terms of my own experience I would say what I am the most comfortable with is react, I spent countless hours building things with it already. I came to front-end mentor to solidify everything that is still a weakness for me.
I am still learning a lot, like I gave a quick look at your newsletter sign-up form and I really liked your way of handling the form using the validator library, and I want to implement it in my work now since my form handling is really bad at the moment.
React router will be a must know for sure, it is a little bit intimidating at first, but once it's setup it becomes pretty intuitive and opens up a lot of possibility. It was still hard for me until recently, because you only do the hard part once per project so if you really want to grasp it fast, use it in every project !
Marked as helpful1@psychederikPosted 2 days ago@Fable54321 That's good advice, I will use React Router in every project once I learn it.
I learned React mostly from the course created by Jonas Schmedtmann on Udemy. Once I learned components, props and some hooks, I decided to pause there and build some projects to really nail in the knowledge. I will likely learn React Router in the coming weeks.
I also got gifted a monthly subscription to Scrimba last week so I started sinking my time there and taking a short break from Frontend Mentor (FM). I will update my FM profile and add some social links in case you wanted to share code outside of FM.
1@Fable54321Posted 2 days ago@psychederik yep it is always a good idea to spend more time on projects, it might seem like a big mountain to climb but at one point or another everything needs to come as second nature or almost.
I did a full front-end engineering course and I'm excited at the idea of being job-ready soon, but I also realize I stille have quite a few things to practice/learn still.
Better to be over-prepared than under-prepared in my book !
Might sound weird bu is there a simple way we could keep this conversation elsewhere, this is starting to make a lot of comments here ahaha.
1@psychederikPosted 2 days ago@Fable54321 Yeah, i get that feeling too. Feeling closer and closer to being job ready and its exciting.
I made a Twitter account to start posting my coding projects: https://twitter.com/codingderik
You can add me there if you use Twitter. I also followed you on GitHub. Discord works too.
1
Please log in to post a comment
Log in with GitHub
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