Pre-requisites & Tech Stack Used For Our Currency Converter App in React

Before we start building the Currency Converter App, let’s make sure your development environment is ready. In this module, we’ll go through the tools you need to install and explain the technologies that power this project.

To build, run, and deploy the Currency Converter App smoothly, you’ll need:

1. Node.js and npm

Node.js allows us to run JavaScript outside the browser. It also comes with npm (Node Package Manager), which is used to install dependencies like React, Vite, and Tailwind.

To check if they’re installed, run these commands in your terminal:

node -v

npm -v

If you don’t see version numbers, download Node.js from https://nodejs.org.

1. Visual Studio Code (VS Code)

This is the code editor where we’ll write and organize our React project.

It supports JavaScript, React, and has handy extensions like Prettier for formatting.

Download it here: https://code.visualstudio.com.

1. Modern Web Browser

Use the latest version of Chrome, Firefox, Edge, or Safari to test and run your app.

Modern browsers support ES6+ JavaScript features, JSX, and responsive CSS.

1. Git (Optional)

Git helps track code changes and allows you to push your project to GitHub.

To check if you already have Git:

git --version

If not installed, download it from https://git-scm.com.

1. Netlify Account
   • Once the app is complete, we’ll deploy it for free using Netlify.
   • Create an account here: https://www.netlify.com.

Here’s a breakdown of the technologies we’ll use for this app:

1. React.js (with Vite)
   • React helps us build interactive user interfaces using reusable components.
   • Vite is our build tool. It’s faster and lighter than older tools like Create React App.
   • We’ll use modern JavaScript features such as:
     • Arrow functions → shorter, cleaner functions
     • Destructuring → easily extract values from objects/arrays
     • Template literals → cleaner string handling
     • Event handling → manage user actions like input change
     • Array methods (map) → render dropdown currency options dynamically
2. HTML + JSX and TailwindCSS
   • The app structure is created using JSX (React’s HTML-like syntax).
   • TailwindCSS is used for styling — it gives us utility classes for margins, paddings, colors, and responsive layouts.
   • For example:
     • flex, grid, p-4, rounded-lg for layout
     • bg-blue-500 for button colors
     • text-center for alignment
3. Exchange Rate API (real-time data)
   • We’ll use a free currency exchange rate API to fetch live conversion rates.
   • React’s useEffect hook will help us fetch new rates whenever the selected currency changes.
4. Node.js and npm
   • npm will install all our project dependencies like React, Tailwind, and any additional libraries we might use.
5. Netlify (Deployment)
   • At the end, we’ll deploy the app to Netlify so it’s publicly accessible.
   • Deployment is quick and beginner-friendly — just drag & drop or connect via GitHub.

Our app accepts user input in the following forms:

• A number input for the amount to convert.
• Two dropdowns (From Currency and To Currency) for selecting currencies.
• Once the user enters an amount and selects currencies, the app fetches the conversion rate and calculates the result.

Output

Once the inputs are given, our app dynamically:

• Fetches the latest exchange rate from the API.
• Displays the converted amount in real time.
• Updates instantly when the amount or currencies change.
• Provides a responsive and clean UI styled with TailwindCSS.

This makes the app both functional and user-friendly, while teaching you how real-world apps interact with APIs and display dynamic results.