{"id":15207202,"url":"https://github.com/techycode-01/currency_converter","last_synced_at":"2026-02-01T22:32:21.036Z","repository":{"id":253247392,"uuid":"842927460","full_name":"techycode-01/Currency_Converter","owner":"techycode-01","description":"Currency Converter is a web application built with React, Vite, and Tailwind CSS. It enables real-time currency conversion and supports currency selection and amount input with a user-friendly interface.","archived":false,"fork":false,"pushed_at":"2024-09-22T10:44:16.000Z","size":995,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T07:01:39.546Z","etag":null,"topics":["hooks","jsx","reactjs","tailwind-css"],"latest_commit_sha":null,"homepage":"https://currencytype-converter.netlify.app/","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/techycode-01.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-08-15T12:09:24.000Z","updated_at":"2024-09-22T10:44:19.000Z","dependencies_parsed_at":"2024-11-16T05:42:00.598Z","dependency_job_id":"9bb383a4-d03f-4ed9-a039-06d8f45966c9","html_url":"https://github.com/techycode-01/Currency_Converter","commit_stats":{"total_commits":12,"total_committers":2,"mean_commits":6.0,"dds":0.5,"last_synced_commit":"f5101410fc65baec5742cd55c27e8ac8e124c8ee"},"previous_names":["techycode-01/currency_converter"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techycode-01%2FCurrency_Converter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techycode-01%2FCurrency_Converter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techycode-01%2FCurrency_Converter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techycode-01%2FCurrency_Converter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/techycode-01","download_url":"https://codeload.github.com/techycode-01/Currency_Converter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253321897,"owners_count":21890488,"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":["hooks","jsx","reactjs","tailwind-css"],"created_at":"2024-09-28T06:23:40.200Z","updated_at":"2026-02-01T22:32:20.996Z","avatar_url":"https://github.com/techycode-01.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Currency Converter React App\n\n## Overview\n\nThis is a simple currency converter built with React + Vite And Tailwind CSS. It allows users to convert between different currencies using live exchange rates. The app features a user-friendly interface and supports dynamic currency conversion with real-time data.\n\n## Features\n\n- **Live Currency Conversion**: Fetches real-time exchange rates.\n- **Swap Functionality**: Easily swap the \"From\" and \"To\" currencies.\n- **Responsive Design**: Works well on various screen sizes.\n\n## Screenshots\n\n![Currency Converter Screenshot](./src/assets/currency_converter.png)\n\n## Live Demo\n\nCheck out the live demo [here](https://currencytype-converter.netlify.app/).\n\n## Installation\n\nTo set up this app locally, follow these steps:\n\n1. **Clone the Repository**:\n\n   ```bash\n   git clone https://github.com/your-username/react-currency-converter.git\n\n\n2. **Navigate to the Project Directory**:\n\n   ```bash\n   cd react-currency-converter\n\n\n3. **Install Dependencies**:\n\n   ```bash\n   npm install\n\n\n4. **Start the Development Server**:\n\n   ```bash\n   npm run dev\n   \n\n5. **Open Your Browser**:\n\n   Navigate to `http://localhost:5173` to view the app.\n\n## Usage\n\n1. **Select Currency**: Choose the currency you want to convert from in the \"From\" field.\n2. **Enter Amount**: Input the amount to be converted.\n3. **Select Target Currency**: Choose the currency you want to convert to in the \"To\" field.\n4. **Convert**: Click the \"Convert\" button to see the result.\n5. **Swap Currencies**: Use the \"Swap\" button to interchange the \"From\" and \"To\" currencies.\n\n## Technologies Used\n\n- **React**: JavaScript library for building user interfaces.\n- **Tailwind CSS**: Utility-first CSS framework for styling.\n- **Vite**: Build tool that provides fast development.\n- **Currency API**: API for fetching live currency exchange rates.\n\n## Code Overview\n\n### `useCurrencyInfo.js`\n\nA custom React hook that fetches currency data from the Currency API.\n\n```javascript\nimport { useEffect, useState } from \"react\";\n\nfunction useCurrencyInfo(currency) {\n  const [data, setData] = useState({});\n  useEffect(() =\u003e {\n    fetch(`https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/${currency}.json`)\n      .then((res) =\u003e res.json())\n      .then((res) =\u003e setData(res[currency]));\n  }, [currency]);\n  return data;\n}\n\nexport default useCurrencyInfo;\n```\n\n### `InputBox.js`\n\nA reusable input component for selecting currencies and entering amounts.\n\n```javascript\nimport React, { useId } from 'react';\n\nfunction InputBox({\n  label,\n  amount,\n  onAmountChange,\n  onCurrencyChange,\n  currencyOptions = [],\n  selectCurrency = \"usd\",\n  amountDisable = false,\n  currencyDisable = false,\n  className = \"\",\n}) {\n  const amountInputId = useId();\n  return (\n    \u003cdiv className={`bg-white p-3 rounded-lg text-sm flex ${className}`}\u003e\n      \u003cdiv className=\"w-1/2\"\u003e\n        \u003clabel htmlFor={amountInputId} className=\"text-black/40 mb-2 inline-block\"\u003e\n          {label}\n        \u003c/label\u003e\n        \u003cinput\n          id={amountInputId}\n          className=\"outline-none w-full bg-transparent py-1.5\"\n          type=\"number\"\n          placeholder=\"Amount\"\n          disabled={amountDisable}\n          value={amount}\n          onChange={(e) =\u003e onAmountChange \u0026\u0026 onAmountChange(e.target.value)}\n        /\u003e\n      \u003c/div\u003e\n      \u003cdiv className=\"w-1/2 flex flex-wrap justify-end text-right\"\u003e\n        \u003cp className=\"text-black/40 mb-2 w-full\"\u003eCurrency Type\u003c/p\u003e\n        \u003cselect\n          className=\"rounded-lg px-1 py-1 bg-gray-100 cursor-pointer outline-none\"\n          value={selectCurrency}\n          onChange={(e) =\u003e onCurrencyChange \u0026\u0026 onCurrencyChange(e.target.value)}\n          disabled={currencyDisable}\n        \u003e\n          {currencyOptions.map((currency) =\u003e (\n            \u003coption key={currency} value={currency}\u003e\n              {currency}\n            \u003c/option\u003e\n          ))}\n        \u003c/select\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default InputBox;\n```\n\n### `App.js`\n\nThe main component that uses the `useCurrencyInfo` hook and `InputBox` component to build the currency converter.\n\n```javascript\nimport { useState } from 'react';\nimport InputBox from './components/InputBox';\nimport useCurrencyInfo from './hooks/useCurrencyInfo';\n\nfunction App() {\n  const [amount, setAmount] = useState(0);\n  const [from, setFrom] = useState('usd');\n  const [to, setTo] = useState('inr');\n  const [convertedAmount, setConvertedAmount] = useState(0);\n\n  const currencyInfo = useCurrencyInfo(from);\n\n  const options = Object.keys(currencyInfo);\n\n  const swap = () =\u003e {\n    setFrom(to);\n    setTo(from);\n    setConvertedAmount(amount);\n    setAmount(convertedAmount);\n  };\n\n  const convert = () =\u003e {\n    setConvertedAmount(amount * currencyInfo[to]);\n  };\n\n  return (\n    \u003cdiv\n      className=\"w-full h-screen flex flex-wrap justify-center items-center bg-cover bg-no-repeat\"\n      style={{\n        backgroundImage: `url('https://images.pexels.com/photos/3532540/pexels-photo-3532540.jpeg?auto=compress\u0026cs=tinysrgb\u0026w=1260\u0026h=750\u0026dpr=2')`,\n      }}\n    \u003e\n      \u003cdiv className=\"w-full max-w-4xl mx-auto flex items-center\"\u003e\n        \u003cdiv className=\"flex-shrink-0 mr-5\"\u003e\n          \u003cimg\n            src=\"https://images.pexels.com/photos/164744/pexels-photo-164744.jpeg\"\n            alt=\"Currency exchange\"\n            className=\"rounded-lg object-cover\"\n            style={{ maxHeight: '400px' }}\n          /\u003e\n        \u003c/div\u003e\n        \u003cdiv className=\"flex-grow\"\u003e\n          \u003cdiv className=\"w-full max-w-md border border-gray-60 rounded-lg p-5 backdrop-blur-sm bg-white/30\"\u003e\n            \u003cform\n              onSubmit={(e) =\u003e {\n                e.preventDefault();\n                convert();\n              }}\n            \u003e\n              \u003cdiv className=\"w-full mb-1\"\u003e\n                \u003cInputBox\n                  label=\"From\"\n                  amount={amount}\n                  currencyOptions={options}\n                  onCurrencyChange={(currency) =\u003e setFrom(currency)}\n                  selectCurrency={from}\n                  onAmountChange={(amount) =\u003e setAmount(amount)}\n                /\u003e\n              \u003c/div\u003e\n              \u003cdiv className=\"relative w-full h-0.5\"\u003e\n                \u003cbutton\n                  type=\"button\"\n                  className=\"absolute left-1/2 -translate-x-1/2 -translate-y-1/2 border-2 border-white rounded-md bg-blue-600 text-white px-2 py-0.5\"\n                  onClick={swap}\n                \u003e\n                  Swap\n                \u003c/button\u003e\n              \u003c/div\u003e\n              \u003cdiv className=\"w-full mt-1 mb-4\"\u003e\n                \u003cInputBox\n                  label=\"To\"\n                  amount={convertedAmount}\n                  currencyOptions={options}\n                  onCurrencyChange={(currency) =\u003e setTo(currency)}\n                  selectCurrency={to}\n                  amountDisable\n                /\u003e\n              \u003c/div\u003e\n              \u003cbutton\n                type=\"submit\"\n                className=\"w-full bg-blue-600 text-white px-4 py-3 rounded-lg\"\n              \u003e\n                Convert {from.toUpperCase()} to {to.toUpperCase()}\n              \u003c/button\u003e\n            \u003c/form\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechycode-01%2Fcurrency_converter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftechycode-01%2Fcurrency_converter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechycode-01%2Fcurrency_converter/lists"}