https://github.com/hmzahiqball/exchange-app
A React-based application that displays foreign exchange rates
https://github.com/hmzahiqball/exchange-app
css html jquery js reactjs table-component
Last synced: 30 days ago
JSON representation
A React-based application that displays foreign exchange rates
- Host: GitHub
- URL: https://github.com/hmzahiqball/exchange-app
- Owner: hmzahiqball
- Created: 2025-05-14T02:57:06.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-23T04:29:56.000Z (about 1 year ago)
- Last Synced: 2025-10-27T14:18:48.259Z (7 months ago)
- Topics: css, html, jquery, js, reactjs, table-component
- Language: JavaScript
- Homepage:
- Size: 312 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 💱 Currency Exchange Rate Viewer
A React-based application that displays foreign exchange rates in an interactive table format using `react-data-table-component`. The app supports both static data from a local file and live data from the [exchangerate-api.com](https://www.exchangerate-api.com) API
---
## 🌐 Live Demo
Example: [View Demo](https://put-exchangerate.netlify.app)
---
## 📌 Features
- 🌍 Displays exchange rates for 150+ global currencies
- 📊 Interactive data table: sortable, paginated, and responsive
- 💵 Static row for USD always stays at the top
- 🔄 Supports live data via a personal API key from exchangerate-api.com
- 📁 Defaults to local JSON file (`src/json/response.json`) if no API is used
- 🎨 Clean and responsive UI powered by Tailwind CSS
---
## 🚀 Installation & Running the App
### 1. Clone the Repository
```bash
git clone https://github.com/hmzahiqball/exchange-app.git
cd exchange-app
```
### 2. Install Dependencies
```bash
npm install
```
### 3. Start the Development Server
```bash
npm run dev
```
## 🔧 Using Live API (Optional)
To display real-time exchange rates, you can use your personal API key from:
🔗 https://www.exchangerate-api.com
### Steps:
- Sign up and get your personal API key.
- Open `src/api/currencyAPI.jsx` and update the token with your API key
## 🗂 Project Structure
```bash
├── public/
├── src/
│ ├── data/
│ │ └── currencyMeta.js # Currency names and country metadata
│ ├── json/
│ │ └── response.json # Local exchange rate data (default)
│ └── components/
│ └── CurrencyTable.jsx # Main data table component
├── .env # API key configuration file (optional)
├── package.json
└── README.md
```