{"id":27106987,"url":"https://github.com/santhoshpandi/currency-converter-react","last_synced_at":"2026-05-05T13:41:55.777Z","repository":{"id":278937052,"uuid":"901146128","full_name":"santhoshpandi/currency-converter-react","owner":"santhoshpandi","description":"React-based web application that allows users to convert currencies from one type to another, using real-time exchange rates. It also uses Tailwind and Vite bundler.","archived":false,"fork":false,"pushed_at":"2025-02-22T16:26:57.000Z","size":2706,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-22T17:27:54.283Z","etag":null,"topics":["currency","currency-api","currency-converter","fetch-api","react","react-hooks","reactjs","tailwind-css","vite"],"latest_commit_sha":null,"homepage":"https://santhoshpandi.github.io/currency-converter-react/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/santhoshpandi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-10T05:57:13.000Z","updated_at":"2025-02-22T16:26:33.000Z","dependencies_parsed_at":"2025-02-22T17:38:21.984Z","dependency_job_id":null,"html_url":"https://github.com/santhoshpandi/currency-converter-react","commit_stats":null,"previous_names":["santhoshpandi/currency-converter-react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/santhoshpandi%2Fcurrency-converter-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/santhoshpandi%2Fcurrency-converter-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/santhoshpandi%2Fcurrency-converter-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/santhoshpandi%2Fcurrency-converter-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/santhoshpandi","download_url":"https://codeload.github.com/santhoshpandi/currency-converter-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247543866,"owners_count":20955910,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["currency","currency-api","currency-converter","fetch-api","react","react-hooks","reactjs","tailwind-css","vite"],"created_at":"2025-04-06T20:19:45.403Z","updated_at":"2026-05-05T13:41:50.755Z","avatar_url":"https://github.com/santhoshpandi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Currency Converter App\n\n## Overview\n\nThe **Currency Converter** is a `React`-based web application that allows users to convert currencies from one type to another, using real-time exchange rates. The app utilizes `Tailwind CSS` for styling, `Vite` for fast development, and the `Frankfurter API` to fetch live exchange rates for various global currencies. It also includes a custom hook for a smooth sliding effect as elements appear in the viewport.\n\n## Developed by\n\n- `Santhosh Pandi` -- **Live Preview** https://github.com/santhoshpandi/currency-converter-react\n\n## Screenshots\n\n![image](/src/screenshots/pc.png)\n\n![image](/src/screenshots/mobile.png)\n\n## Features\n\n- **Currency Conversion**: Convert between a wide range of currencies (e.g., INR to USD, EUR to GBP, etc.).\n- **Live Data Fetching**: Utilizes the **Frankfurter API** to get the latest currency exchange rates.\n- **Smooth Animations**: Implements a custom `useIntersectionObserver` hook to animate elements with a sliding effect when they enter the viewport.\n- **Responsive Design**: Built with **Tailwind CSS** to ensure a seamless experience across devices.\n\n## Technologies Used\n\n- **React**: JavaScript library for building the user interface.\n- **Tailwind CSS**: Utility-first CSS framework for responsive and modern designs.\n- **Frankfurter API**: API for fetching real-time currency exchange rates.\n- **Intersection Observer**: A native browser API used for detecting when an element is in the viewport, which is leveraged in the custom hook `useIntersectionObserver` for animation purposes.\n- **Vite**: Next-generation build tool for fast and efficient React app development.\n\n## Installation\n\nFollow these steps to run the app locally on your machine:\n\n### Prerequisites\n\nEnsure you have the following installed:\n\n- Node.js (v14 or later)\n- npm (Node package manager)\n\n### Installation\n\n1. Clone the repository:\n   ```bash\n   git clone https://github.com/santhoshpandi/currency-converter-react.git\n   ```\n\n2. Navigate to the project directory:\n   ```bash\n   cd currency-converter-react\n   ```\n\n3. Install the dependencies:\n   ```bash\n   npm install\n   ```\n\n4. Start the Development server:\n   ```bash\n   npm run dev\n   ```\n\nThe dashboard will be available at http://localhost:5173\n\n### Usage\n\n- Select the source currency and target currency from the dropdown menus.\n- Enter the amount you want to convert.\n- The app will automatically fetch the exchange rates and display the converted amount.\n- Enjoy smooth sliding animations when elements appear in the viewport!\n\n\n### API Used\n\n- ***Frankfurter API*** (https://api.frankfurter.dev): Provides historical and real-time exchange rates for various currencies. We use their `/v1/currencies` endpoint to fetch the available currencies and their conversion rates.\n\n\n## Acknowledgments\n\n- **React**: A JavaScript library for building user interfaces.\n- **Frankfurther API**: For providing reliable and real-time currency exchange rate data.\n- **Tailwind CSS**: A utility-first CSS framework for rapid UI development.\n- **Vite**: An extremely fast build tool for modern web projects.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanthoshpandi%2Fcurrency-converter-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsanthoshpandi%2Fcurrency-converter-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanthoshpandi%2Fcurrency-converter-react/lists"}