This application provides the ability to view exchange rates using the API vatcomply or fxratesapi
Built with React, Reatom v1000, Ark-UI and Panda CSS ESLint is used for linting and formatting
- To run the application, Node.js is required (tested on 24.0.2) and pnpm package manager
pnpm install- Create a
.env.localfile and add environment variables there:
To use vatcomply:
VITE_EXCHANGE_RATES_PROVIDER=vatcomplyTo use fxratesapi:
VITE_EXCHANGE_RATES_PROVIDER=fxrates
VITE_FXRATES_API_KEY=your_api_key_hereThis is not a mandatory step, if the environment file is not created, the application will use the vatcomply API
- Run the application:
pnpm dev- Ark-UI was chosen as the UI library, as it has one of the richest collections of components, whose compositional API allows covering any use cases and requirements
- The buildtime CSS-in-JS engine Panda CSS was chosen for styling, as it provides a complete framework for type-safe organization of tokens, recipes and other styling entities. This is the ideal balance between high DX of css-in-js and performance through static style analysis, inline styles allow very fast layout without an existing design system
- Reatom v1000 was undoubtedly chosen for state management, as it is the most flexible, performant and feature-rich signal reactivity library with a bunch of batteries included. This is the ideal choice for SPA, because things like routing, forms, network requests, caching strategies can be described in a unified reactive system, which provides maximum expressiveness and flexibility. This choice allows avoiding the variety of heterogeneous libraries such as tanstack query, react-hook-form, react-router and others, while getting more capabilities and features with minimal bundle size
A persistent Map was chosen for caching, which synchronizes its state in local storage and into which network requests for exchange rates write. When the browser goes offline, the application starts taking rates directly from the cache, while online the data is simply saved to the cache