Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jay-tillu/currency-converter
Currency Converter App using React
https://github.com/jay-tillu/currency-converter
fetch-api html5 javascript json react rest-api tailwindcss
Last synced: 21 days ago
JSON representation
Currency Converter App using React
- Host: GitHub
- URL: https://github.com/jay-tillu/currency-converter
- Owner: Jay-Tillu
- Created: 2024-09-12T07:08:57.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-24T04:42:35.000Z (4 months ago)
- Last Synced: 2024-12-18T23:43:57.821Z (21 days ago)
- Topics: fetch-api, html5, javascript, json, react, rest-api, tailwindcss
- Language: JavaScript
- Homepage: https://currency-converter-jaytillu.vercel.app/
- Size: 727 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Currency Converter
### 🚀 [Live Demo](https://currency-converter-jaytillu.vercel.app/)
## 🌟 Overview
**Currency Converter** is a feature-rich web application built using **React**, **Tailwind CSS**, and **JavaScript** and hosted on **Vercel**, ensuring fast, reliable deployment. This app converts between multiple currencies using **live exchange rates**. The project is structured with React components and Vite for faster builds. The use of Tailwind CSS ensures a modern and responsive UI. ESLint is integrated for code linting. The app fetches real-time data via API, to display accurate conversions between selected currencies.
## ✨ React Features
- **Functional Components**: This app uses React functional components to build the user interface, ensuring reusability and modularity.
- **State Management with `useState`**: The app utilizes `useState` to manage dynamic data, such as input values and conversion results.
- **Side Effects with `useEffect`**: useEffect is used to fetch live exchange rates, ensuring the data is updated when the component mounts or dependencies change.
- **`useId` for Unique Identifiers**: Used `useId` to generate unique IDs for elements, ensuring accessibility and preventing collisions, especially in dynamic form inputs.
- **Custom Hooks for API Data**: Created custom hooks to encapsulate logic for fetching live currency data from an API, promoting reusability and separation of concerns. This approach improves code organization and simplifies component structure by isolating the data-fetching logic.
- **Props**: Components communicate via props, passing data like selected currencies or conversion rates.
- **Vite**: This tool is used for fast development builds, improving performance compared to traditional bundlers.
## ✨ JavaScript Features
- **API Integration**: The app fetches live exchange rates from an external API using `fetch()` for real-time conversions.
- **ES6+ Features**: It leverages modern JS features like arrow functions, and template literals for cleaner, more concise code.
- **Data Mapping**: The app maps over arrays (e.g., currency options) to dynamically generate elements, ensuring scalability when more currencies are added.
- **Error Handling**: Error boundaries or `try/catch` blocks manage potential API or data fetching errors to enhance user experience.
## 📸 Screenshots
## 🔧 Installation and Setup
To run this project locally:
1. Clone the repository:
```bash
git clone https://github.com/Jay-Tillu/Currency-Converter.git
```
2. Navigate to the project directory:
```bash
cd your-repo-name
```
3. Install dependencies:
```bash
npm install
```
4. Run the Project:
```bash
npm run dev
```
Thanks for your time and attention.