Step-by-Step Implementation of Our Currency Converter App

In this module, we’ll build the complete Currency Converter App from scratch using React + Vite. We’ll go step by step through the project setup, installing Tailwind CSS, creating components, handling API data, writing conversion logic, and styling everything neatly.

By the end of this module, you’ll have a fully functional currency converter that takes user input, fetches live exchange rates, and displays the converted value instantly.

Step 1) Set up the Environment

1) Install Node.js

Make sure you have Node.js and npm installed. Download it from https://nodejs.org and check with:

node -v

npm -v

2) Create a React App with Vite

In your terminal, run:

npm create vite@latest currency-converter -- --template react

Then navigate inside:

cd currency-converter

npm install

3) Start the App

Run the dev server:

npm run dev

Your app will open at http://localhost:5173. You’ll see the default Vite + React template.

Step 2) Install and Configure Tailwind CSS

We’ll use Tailwind CSS for fast and clean styling.

1) Install Tailwind and PostCSS plugins

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

2) Configure Tailwind

Open tailwind.config.js and update:

export default {

content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],

theme: {

extend: {},

},

plugins: [],

};

3) Add Tailwind to CSS

In src/index.css, add:

@tailwind base;

@tailwind components;

@tailwind utilities;

Now Tailwind classes will work across your project.

Step 3) Create the Project Files

Your final folder structure will look like this:

currency-converter/

├── public/

├── src/

│   ├── App.jsx

│   ├── components/

│   │   ├── CurrencyConverter.jsx

│   │   └── CurrencyDropdown.jsx

│   ├── index.css

│   └── main.jsx

├── index.html

├── tailwind.config.js

├── package.json

• App.jsx → root component
• CurrencyConverter.jsx → handles input, dropdowns, and logic
• CurrencyDropdown.jsx → reusable dropdown component

Step 4) Build the Currency Converter Component

Create a new file src/components/CurrencyConverter.jsx and paste this:

import { useState, useEffect } from "react";

function CurrencyConverter() {

const [amount, setAmount] = useState(1);

const [fromCurrency, setFromCurrency] = useState("USD");

const [toCurrency, setToCurrency] = useState("INR");

const [rates, setRates] = useState({});

const [result, setResult] = useState(null);

// Fetch exchange rates

useEffect(() => {

fetch(`https://api.exchangerate-api.com/v4/latest/${fromCurrency}`)

.then((res) => res.json())

.then((data) => setRates(data.rates));

}, [fromCurrency]);

// Convert amount

const convertCurrency = () => {

if (rates[toCurrency]) {

setResult((amount * rates[toCurrency]).toFixed(2));

}

};

return (

<div className="p-6 bg-white rounded-xl shadow-md w-full max-w-md">

<h1 className="text-2xl font-bold mb-4 text-center">Currency Converter</h1>

{/* Input field */}

<input

type="number"

value={amount}

onChange={(e) => setAmount(e.target.value)}

className="border p-2 rounded w-full mb-4"

/>

{/* Dropdowns */}

<div className="flex gap-4 mb-4">

<select

value={fromCurrency}

onChange={(e) => setFromCurrency(e.target.value)}

className="border p-2 rounded w-1/2"

{Object.keys(rates).map((currency) => (

<option key={currency} value={currency}>

{currency}

</option>

))}

</select>

<select

value={toCurrency}

onChange={(e) => setToCurrency(e.target.value)}

className="border p-2 rounded w-1/2"

{Object.keys(rates).map((currency) => (

<option key={currency} value={currency}>

{currency}

</option>

))}

</select>

</div>

{/* Button */}

<button

onClick={convertCurrency}

className="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600"

Convert

</button>

{/* Result */}

{result && (

<p className="mt-4 text-lg font-semibold text-center">

Converted Amount: {result} {toCurrency}

</p>

)}

</div>

);

}

export default CurrencyConverter;

This handles amount input, currency selection, fetching exchange rates, and showing the converted value.

Step 5) onnect Converter in App.jsx

Open src/App.jsx and replace with:

import CurrencyConverter from "./components/CurrencyConverter";

function App() {

return (

<div className="flex justify-center items-center min-h-screen bg-gray-100">

<CurrencyConverter />

</div>

);

}

export default App;

This centers the converter in the middle of the page.

Step 6) Setup Entry Point (main.jsx)

In src/main.jsx:

import React from "react";

import ReactDOM from "react-dom/client";

import App from "./App.jsx";

import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(

<React.StrictMode>

<App />

</React.StrictMode>

);

Step 7) Update HTML (index.html)

Open index.html and edit like this:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Currency Converter</title>

<link

href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"

rel="stylesheet"

/>

</head>

<body class="font-[Poppins] bg-gray-100">

<div id="root"></div>

<script type="module" src="/src/main.jsx"></script>

</body>

</html>

Step 8) Test and Run the App

Run:

npm run dev

Open http://localhost:5173.

Try it out:

• Enter an amount.
• Select “From” and “To” currencies.
• Click Convert.
• See the converted value displayed instantly.

Great job! You’ve just built your own currency converter app with live exchange rates, clean styling, and reusable components.