desmondtong/currency-exchange-app

CurrenSee is a user-friendly React app that enables easy currency conversion, historical rate visualization, and personalized watchlists and widgets for currency tracking.

THIS PROJECT IS NO LONGER WORKING AS THERE IS A MAJOR REVAMP IN THE API OF THE 3RD PARTY API USED (Exchangerate.host). PLEASE VISIT THE UPDATED VERSION HERE LEVERAGING A DIFFERENT CURRENCY CONVERSION API.

---

CurrenSee (Currency Converter)

Introduction

CurrenSee is a user-friendly and intuitive React App that provides you with a comprehensive set of tools for currency conversion and exchange rate tracking. Leveraging the powerful Exchangerate.host API, CurrenSee allows you to effortlessly check real-time currency conversion rates, explore historical rate trends through interactive graphs, and manage your favorite currencies with a personalized watchlist.

p/s: the currency rate are refreshed daily

---

App Overview

1/ Dashboard

Effortlessly keep track of your favorite exchange rates and currencies using the Widget and Watchlist features.

2/ Converter

Experience an comphrehensive currency conversion interface comes with preset values, facilitating quick reference and seamless conversion of larger amounts.

3/ Chart

Get a closer look at your favorite exchange rates with a larger and more detailed chart view.

4/ About

Discover more about the creator behind this humble app (that's me!).

Features Highlight

1/ Graph Widgets

1. Easily add the current graph in view to a widget by clicking the "+" button. The app supports up to a maximum of 4 widgets, and adding a 5th widget will remove the first one.
2. To remove any widgets, simply hover over the corner of the widget to reveal the delete button.
3. Click on any widget to display the corresponding graph.

2/ Exchange Rate Watchlist

1. Add your currency of choice to the watchlist by clicking the "+" button. There is no limit to the number of currencies you can add, as the watchlist is scrollable.
2. To remove any currencies from the watchlist, click the Edit button to reveal the delete buttons.
3. Click on any currency within the watchlist to set it as the base currency and quickly view all exchange rates based on that currency.

---

Technologies Used

Front-end

• JavaScript
• CSS
• React
• Bootstrap
• Material UI

Data Visualization

• Chart.js

API

• Exchangerate.host

---

References & Credits

Front-end Libraries/Frameworks

• Bootstrap
• Material UI

UI Design Inspiration

• XE Currency Converter
• Currency Dashboard by Vitaliy Malyushko

API documentation

• Exchangerate.host

JavaScript & JSX

• MDN Web Docs - input/date
• Subtracting Dates in JavaScript
• Custom Dropdown Arrow Appearance

React Integration with Chart.js

• How to Use Chart.js with React
• Using Chart.js with React - LogRocket Blog

Chart.js with React - StackOverflow Threads

• Hide Points in Chart.js Line Graph
• Disable Everything on Hover in Chart.js
• Remove X and Y Axis in React Chart.js
• Background Color for Area Below Line Chart in Chart.js
• How Can I Make Two of My Lines in Chart.js Thicker

Custom Scrollbars

• Hide Scrollbars with CSS
• Custom Scrollbars in Webkit - W3Schools

FontAwesome Icons

• Font Awesome - React Integration

Currency Flags

• Country Currency Emoji Flags

Credit to annoying brother for designing the logo 🤡