Deployment and Final Touches to Our Currency Converter App

You’ve now built a fully functional Currency Converter App using React and Vite. Your users can enter an amount, select two currencies, and get instant conversion results with live exchange rates. By the end of this module, your app will be hosted online, so you can share it with the world.

1) Uploading Your Currency Converter App to GitHub

Before deployment, let’s store the project in GitHub so it’s safe and shareable.

Step 1: Initialize Git in Your Project

Open your terminal inside the project’s root folder (where package.json is) and run:

git init

git add .

git commit -m "Initial commit for currency converter app"

Step 2: Create a GitHub Repository

1. Go to GitHub.
2. Click the + icon → New repository.
3. Name it something like currency-converter-app.
4. Leave README and .gitignore unchecked.
5. Click Create repository.

Step 3: Push Your Code to GitHub

Back in your terminal, link your repo and push:

git branch -M main

git remote add origin https://github.com/your-username/currency-converter-app.git

git push -u origin main

Tip: If GitHub asks for login, use your GitHub credentials or a Personal Access Token.

Your code is now live on GitHub, ready for deployment.

2) Deploying Your App to Netlify

We’ll use Netlify (a free and beginner-friendly hosting service) to make your app live.

Step 1: Build the Project for Production

Run:

npm run build

This creates a dist/ folder containing an optimized production-ready version of your app.

Step 2: Sign Up on Netlify

1. Go to Netlify.
2. Sign up or log in with your GitHub account.
3. On your dashboard, click Add new site → Import an existing project.

Step 3: Link GitHub Repository

1. Authorize Netlify to access your GitHub.
2. Select your currency-converter-app repository.

Step 4: Configure Deployment

1) Build command:

npm run build

2) Publish directory:

dist

1. Click Deploy Site.

After a short wait, Netlify will give you a live URL like:
https://your-currency-converter.netlify.app/

3) Test Your Live App

Now go to your Netlify URL and test:

• Enter an amount.
• Choose different currencies.
• Check if conversion updates instantly.
• Try resizing the browser to test responsiveness.

If everything works, kudos to you! — You’ve deployed your Currency Converter App successfully!