Currency Converter

Live url: https://flight.github.io/currency-converter/

React + Typescript + Tailwind CSS + daisyUI + Recharts + Storybook + Vite + ESLint + Prettier + Husky + Vitest + jest-dom (React Testing Library) + c8 + Cypress

Initial setup:

1. Install the node.js https://nodejs.org/en/download/

2. Install the latest version of pnpm package manager npm install -g pnpm or brew install pnpm

3. Install the dependencies pnpm install

4. Create .env.local file in the project root folder with your API key for https://exchangeratesapi.io/ (Free 250 Monthly Requests) VITE_API_KEY=YOUR_KEY

Running

pnpm start

Storybook

The solution uses Storybook as the components style guide.

To run the preview: pnpm storybook

To build the production Storybook setup: pnpm build-storybook

To run the preview server with the production Storybook build: pnpm preview-storybook

Production build

pnpm build

To run the preview server with the production build:

pnpm preview

Testing

Live mode pnpm test

Coverage check pnpm coverage

E2E tests pnpm e2e or pnpm e2e:silent to run in silent mode (on CI, for example)

Pre-commit checks pnpm pre-commit

Design decisions

• Tailwind CSS + PostCSS for tree-shakable utility classes and minimum amount of hand-written CSS
• daisyUI for the basic components like cards, buttons, selects and inputs
• Recharts for the currency exchange history chart
• Storybook as the components style guide, so the individual components can be build in the sandbox environment
• Vite for bundling everything (much faster than Webpack)
• ESLint + Prettier for linting and prettifying the codeHusky for pre-commit hooks
• Vitest + jest-dom (React Testing Library) + c8 for the unit testing
• Cypress + Cypress Testing Library for the end-to-end testing

Good sides of the implementation

• The API request responses are cached in the local storage
• The dummy components and the business logic are completely separated, so the solution is can use Storybook pnpm storybook
• The design is mobile-first, so can be used on any type of the devices
• The building takes a few seconds
• The unit-tests run takes 2-3 seconds
• The E2E tests run takes a few seconds together with production build creation and serving

Next steps

• Create BE server to store the API key, not to expose it to the internet and cache the fetched data. Firebase functions or AWS lambda should be enough.
• Save each exhange rate by date and load only the new one the next day.
• Improve the error handling and connect the TrackJS or Sentry IO
• Set up CI / CD process. For example, using (GitHub Actions)[https://github.com/features/actions] or Gitlab CI/CD
• Use some free API, buy more requests or implement auth to limit the number of users using the paid one