[REFACTOR] Project Structure Optimization and Dependency Cleanup

[tyin363]

Summary

Refactor the project's file structure by removing node_modules from version control, adding it to .gitignore, renaming the Backend folder to backend, and consolidating all CSS files into a new styles/ folder. This refactor aims to improve project organization and maintainability.

Motivation

The refactoring aims to improve the maintainability and clarity of the project's file structure by:

1. Removing unnecessary files (node_modules) from version control.
2. Standardizing folder naming (renaming Backend to backend for consistent casing).
3. Separating CSS files into a dedicated folder to avoid scattering styling files across various directories, making the codebase easier to navigate and maintain.

Current State

• node_modules was previously committed to the repository, which is unnecessary and bloats the repo size.
• The folder Backend is named inconsistently with typical project conventions.
• CSS files are currently scattered across multiple component and page directories, often residing next to their corresponding .js files (e.g., components/chimptestjs, components/chimptestcss, pages/home.js, pages/home.css).

Proposed Changes

1. Remove node_modules from version control:

   • Delete the node_modules folder from the repository.
   • Add node_modules to the .gitignore file to prevent future accidental commits.

2. Rename Backend to backend:

   • Rename the Backend folder to backend to follow consistent naming conventions (lowercase folder names).

3. Consolidate CSS files:

   • Move all existing CSS files into a new folder called styles/.
   • Update import paths in the corresponding JavaScript/React files to reflect the new location of the CSS files.

Additional Context

• This refactor aligns the project with common front-end development best practices, where separating concerns by moving CSS files into a central folder is encouraged.
• Consistency in folder naming also aids in reducing confusion and making it easier for team members to locate files.

Potential Challenges

• Updating imports: All files that currently import CSS files will need to have their import paths updated to reference the new styles/ folder. This could involve many changes across various files and may introduce errors if not done carefully.
• Renaming conflicts: Some operating systems may treat folder names with different cases (Backend vs. backend) as the same, potentially causing conflicts. Care must be taken during this renaming process.
• Rebuilding after node_modules removal: After removing node_modules, team members will need to reinstall dependencies using npm install or yarn install.

Notes

• Be sure to test the application thoroughly after making these changes to ensure all imports are correct and no styles are broken due to the new folder structure.