Submitted 7 months ago

Time Tracking Dashboard

react, typescript, vite, sass/scss

aurobyte•130

@taranjeetsingh9

A solution to the Time tracking dashboard challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud of logic building part as well as my new learning about typescript, vite working with scss it's great.

What challenges did you encounter, and how did you overcome them?

Face significant challenges in use state understanding but time investing in undestanding them worth.

What specific areas of your project would you like help with?

I have doubt regarding the setting up css for project as we have #root div inside index.html then we set up other div styling and it mix up styles and layout. So if someone suggest me great resource son how to style react components and index.html so that in starting we have good layout.

Code

Please log in to post a comment

Community feedback

P
Huy Phan•3,430
@huyphan2210
Posted 7 months ago
Hi, @taranjeetsingh9,

I checked out your solution and wanted to share some feedback:

You can organize your SCSS files similarly to how you structure your components. In React, it's common practice for each component to have its own .tsx and .scss files, grouped within a folder named after the component. For example:
```
└── components  
    └── Button  
        ├── Button.tsx  
        └── Button.scss  
    └── Header  
        ├── Header.tsx  
        └── Header.scss  
```
You can then import the component’s SCSS file directly into its .tsx file, similar to how you import main.css in main.tsx.

Keep in mind that component styles aren’t scoped by default in React. This means that class and ID selectors can affect the entire page. To avoid unintended styling conflicts, be intentional with how you name classes and IDs.

Hope this helps!
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