The Exchange application provides a convenient way to exchange currency among EUR, GBP, USD currencies. It provides live exchange rates between these currencies and manage wallet balance in these currencies.
- State management : The application state is managed using context providers and useReducer()
- Design pattern : The providers, reducers and hooks are organised based on design patterns suggested in these blogs (1, 2)
- Testing : Usecases are covered using integration tests and unit tests. Jest and react-testing-library are the main libraries used for testing
- Component library : Components and Grid system of material-ui is used
- Component styling : CSS-in-JS solution of material-ui is used
- Typing : The project uses TypeScript
- Linting & Formatting : Uses the default ESLint config of CRA. Prettier for code formatting. husky and lint-staged are used as auxiliary library
- A Web Worker could be used to update the exchange rates periodically
- Additional features like switching to dark mode can be added. The useTheme() custom hook used in the code can be extended to implement this feature
- E2E test cases can be added using Cypress or TestCafe
- Flags can be added alongside the currency labels to make the app more user friendly
