- React.js Using Create-React-App
- Typescript for type safety
- Core libraries
- Test libraries
- Other tools/libraries
- Opinionated folder structure
- Internationalization for react app using React-i18next
- Material UI Dark Mode support
./src
├── App.tsx # Application entrypoint
├── assets # assets folder contains all the static files (images, fonts, etc).
├── components # shared components
├── config # global configuration, env variables etc.
│ ├── Env.ts
│ └── i18n
├── features
│ ├── feature # 'feature'
│ │ ├── api # API folder contains http service calls
│ │ ├── assets # 'feature' assets folder
│ │ ├── components # 'feature' components
│ │ ├── hooks # 'feature' hooks
│ │ ├── index.ts # entry point for 'feature' public API
│ │ ├── store # 'feature' state stores contains slices, sagas, etc.
│ │ └── types # 'feature' typescript types
│ └── another_feature # 'another_feature'
├── hooks # shared hooks
├── libs # libraries imported or exported that can be used in different projects
│ ├── core
│ └── ui
├── pages # contains all application pages
├── routes # routes configuration
├── store # root store and store settings
└── test/ # contains test utilities and Mock Service Worker setup
└── msw-
Fork/clone this repo to your local machine
-
Use yarn to install dependencies
yarn install -
Start the development server
yarn start
My project try to follow these design patterns:
-
Flux
-
Container-View Pattern
-
Atomic design
-
Normalizing Data Structure for handling large amounts of data
- Improve Test Coverage > 80%
- Apply Security Best Practices
- Benchmark Web Performance and Improve Performance
- Improve CI/CD pipelines