Seperate CSS from index.js

[Palakkgoyal]

What would you like to share?

There are some issues with the codebase that need to be addressed in order to improve its maintainability and efficiency for other developers. One problem is that certain files are using CSS that resides in the index.css file, but the class names are not clear or explicit. Ideally, these classes should be defined in index.css if they are meant to be reusable by other components. However, this is not the case, making it difficult to track and implement changes to the CSS.

Additionally, the overall code structure is not well organized. It appears to be hastily put together, lacking proper separation of concerns. For instance, the navbar and scroll-to-top button should have their own dedicated components, but they are currently located within the App.jsx file.

To address these issues and create clean, efficient code that is more developer-friendly, the following steps can be taken:

• Extract the CSS classes from the individual files and define them explicitly in the index.css file. This will make it easier to understand and manage the CSS styles.

• Refactor the code to separate the navbar, scroll-to-top button and other parts into their own components. This will promote code reusability and improve the overall organization of the project.

By addressing these issues and restructuring the codebase, you can ensure that future developers will have a cleaner and more efficient codebase to work with, ultimately improving productivity and maintainability.

Additional information

I want to work on this issue under GSSOC'23. Please assign this to me.

[narayan954]

What would you like to share?

There are some issues with the codebase that need to be addressed in order to improve its maintainability and efficiency for other developers. One problem is that certain files are using CSS that resides in the index.css file, but the class names are not clear or explicit. Ideally, these classes should be defined in index.css if they are meant to be reusable by other components. However, this is not the case, making it difficult to track and implement changes to the CSS.

Additionally, the overall code structure is not well organized. It appears to be hastily put together, lacking proper separation of concerns. For instance, the navbar and scroll-to-top button should have their own dedicated components, but they are currently located within the App.jsx file.

To address these issues and create clean, efficient code that is more developer-friendly, the following steps can be taken:

• Extract the CSS classes from the individual files and define them explicitly in the index.css file. This will make it easier to understand and manage the CSS styles.
• Refactor the code to separate the navbar, scroll-to-top button and other parts into their own components. This will promote code reusability and improve the overall organization of the project.

By addressing these issues and restructuring the codebase, you can ensure that future developers will have a cleaner and more efficient codebase to work with, ultimately improving productivity and maintainability.

Additional information

I want to work on this issue under GSSOC'23. Please assign this to me.

Yes every word of yours is correct! And that hurts a bit. But yes we are onto this process.
This is a very big/vast issue and can be divided into subparts just like the UI issue. I'm pinning this issue for priority.
You can work on subparts like code refactoring part and CSS management part by creating their separate issue mentioning the stuffs you'll fix as all of them can not be fixed at once I believe like the UI.

Thank you for raising the issue :)

[Palakkgoyal]

Please assign it to me and also add level 1, 2 or 3. Whatever you would think is correct for this.

[narayan954]

Please assign it to me and also add level 1, 2 or 3. Whatever you would think is correct for this.

are you going to work on all of it ? I think it'd be better to do in steps so we can test them as well in stages.
Let's divide this into two css separation task and then refactoring

[narayan954]

two level 2 tasks should be right, what do you think? so we can separately test them

[Palakkgoyal]

Sure. So, first I should refactor the CSS. Right?

[narayan954]

Sure. So, first I should refactor the CSS. Right?

Yes, go ahead! :)

[Palakkgoyal]

@narayan954 Can you please consider adding level3 rather than level2 because it took me dedicated 3 hours to resolve everything. I had to go through every file 100s of time to check whether a particular class is used somewhere else and I had to check each and every class and resolve imports too. Also there occured some merge conflicts that took additional time.
I hope you understand.

[narayan954]

@narayan954 Can you please consider adding level3 rather than level2 because it took me dedicated 3 hours to resolve everything. I had to go through every file 100s of time to check whether a particular class is used somewhere else and I had to check each and every class and resolve imports too. Also there occured some merge conflicts that took additional time. I hope you understand.

Yeah sure, I respect your efforts on this task! thanks for working on this! Updating the difficulty level.