Codebase Outline

General Outline & Tools:

The MyCrypto codebase is a React & Typescript front-end webapp. It utilizes Webpack and Babel for builds, Jest and Testcafe for unit, integration, and e2e tests, Storybook for UI/component development, and Styled Components for component styling syntax

Folder structure:

│
├── /jest_config
├── /webpack_config
├── /__tests__ - E2E tests
├── /.github - Github Actions Workflows CI/CD
├── /.storybook - Storybook config / build scripts
├── /.vscode - VSCode config/settings
├── /coverage - Test coverage reports
├── /electron-app - Electron-specific files (icons, electron window configs, etc)
├── /node-scripts - Standalone scripts
├── /shared - Types/scripts/configs shared between electron and web builds
├── /spec - Some tests (should be deprecated in favor of tests residing in the same folder as the code the test is covering)
├── /src - Majority of components/logic/routes/assets/static html - Accessible through absolute import with @
|   ├── /assets - Static visual assets
|   ├── /components - UI Components file
|   ├── /config - Static configs (links, absolute values, config objects, feature toggle, etc)
|   ├── /containers - UI Containers  (should probably be moved inside of @components)
|   ├── /database - Client-side DB hosted in user's session. Includes seed files, scripts for migrating between versions and tests
|   ├── /features - User-facing features (dashboard, send flow, add-account, buy-assets, etc). Most have their own routes as defined in @config
|   ├── /routing - Logic for routing (react-router). This includes protected routes and redirects
|   ├── /sass - .scss files/variables (this will probably be deprecated in the future in favor of styled-components and JS variables)
|   ├── /services - All services to fetch and provide data to the user including external APIs, user store providers, wallet logic, Ethereum node API wrappers, etc
|   ├── /theme - Static colors / font sizes / spacing sizes and other variables used to conform styling to specific styling standards.
|   ├── /translations - Contains the components and handlers necessary to conduct copy translations in the app
|   ├── /types - Types shared between multiple components/features/services
|   ├── /utils - Utility functions used to transform objects, conduct cryptographic operations and validation, etc
|   ├── /vendor - Vendor integrations & shared hooks (these may be moved)
|   ├── /workers - Service workers
├── /static - Static build files
└── /dist - Output build files