CurrencyPro is a front-end Typescript/JavaScript project that allows users to view live foreign currency exchange rates by selecting a base currency and a target currency. The app fetches real-time conversion data from the Exchange Rate API and displays the result on a dedicated results page.
This project focuses on clean DOM state management, API integration, accessibility, and guided user interaction.
User flow:
- Select a base currency
- Select a target currency
- Navigate to a results page displaying the live conversion rate
The app prevents invalid selections (e.g. USD → USD) and guides the user step-by-step for a better UX.
This project was built to practice and reinforce:
- Reading and implementing API documentation
- Using the Fetch API with authentication
- Managing application state with the DOM
- Accessible UI patterns (ARIA, disabled states)
- Page navigation using URL parameters
- UI state synchronization between views
- Typescript
- JavaScript (ES Modules)
- HTML5
- CSS3
- Fetch API
- Exchange Rate API
Currency data is fetched from:
- Exchange Rate API https://www.exchangerate-api.com/
The UI is based on the provided Figma design:
- Figma file: https://www.figma.com/design/0fqg6mYPiyI7JVmKgbhADd/CurrencyPRO---Learn-JavaScript-Projects
This project follows the specification from Learn JavaScript Online:
- Project steps: https://learnjavascript.online/projects/currency-pro.html
- Base and target currency selection
- Prevention of invalid currency pairs
- Live exchange rate fetching
- Accessible navigation and controls
- Clean separation of logic between pages
Features still to be implemented:
- Finalize and polish CSS layout
- Improve mobile responsiveness
- Add loading and error states
- Finalize and deploy
pnpm install
pnpm run dev