scss/ │ ├── base/ │ ├── _variables.scss # Global variables and configuration │ ├── _reset.scss # Reset or normalize CSS │ ├── _typography.scss # Typography styles │ └── _utilities.scss # Utility classes (e.g., helper classes) │ ├── themes/ │ ├── _light-theme.scss # Light theme styles │ ├── _dark-theme.scss # Dark theme styles │ └── _theme-switcher.scss # Theme switcher styles (if applicable) │ ├── components/ │ ├── _buttons.scss # Button styles │ ├── _forms.scss # Form styles │ ├── _navigation.scss # Navigation styles │ └── ... # Other component-specific styles │ ├── mixins/ │ ├── _animations.scss # Animation mixins │ ├── _breakpoints.scss # Media query mixins │ └── ... # Other mixins │ ├── layout/ │ ├── _grid.scss # Grid system │ ├── _header.scss # Header styles │ ├── _footer.scss # Footer styles │ └── ... # Other layout-specific styles │ ├── pages/ │ ├── _home.scss # Home page styles │ ├── _about.scss # About page styles │ └── ... # Other page-specific styles │ ├── vendor/ not recommended personally │ ├── _bootstrap.scss # Vendor-specific styles (e.g., Bootstrap) │ └── ... # Other vendor styles │ ├── main.scss # Main SCSS entry point │ └── _media-queries.scss # Media query definitions
src/ |-- api/ // API-related code | |-- api.js // API configuration and setup | |-- endpoints/ // API endpoint definitions | | |-- user.js | | |-- post.js | |-- assets/ // Static assets (images, fonts, etc.) | |-- images/ | |-- fonts/ | |-- components/ // Reusable UI components | |-- Button/ | |-- Input/ | |-- Header/ | |-- Footer/ | |-- ... | |-- context/ // Context providers | |-- AuthContext.js | |-- ThemeContext.js | |-- hooks/ // Custom hooks | |-- useApi.js | |-- useAuth.js | |-- ... | |-- pages/ // Page-level components (routes) | |-- Home.js | |-- About.js | |-- Contact.js | |-- ... | |-- routes/ // Route definitions | |-- AppRoutes.js | |-- AdminRoutes.js | |-- ... | |-- styles/ // Global styles and utility SCSS | |-- _variables.scss | |-- _mixins.scss | |-- main.scss | |-- utils/ // Utility functions | |-- dateUtils.js | |-- stringUtils.js | |-- ... | |-- tests/ // Unit and integration tests | |-- components/ | |-- hooks/ | |-- pages/ | |-- ... | |-- App.js |-- index.js |-- config.js // App configuration (e.g., API URLs) |-- reportWebVitals.js |-- setupTests.js // Test setup configuration (e.g., Enzyme, Jest) |-- serviceWorker.js | |-- README.md |-- .gitignore |-- package.json |-- package-lock.json |-- public/ |-- build/