Currency Converter with React JS and Tailwind CSS - Full Tutorial 2024 🔥🔥

Build a Currency Converter App in React JS 18 using tailwindcss for styling. This is a great beginner project for learning react js.

🔗 React JS Interview Series -

👤 Join the RoadsideCoder Community Discord -

🔗 MERN Stack Chat App Tutorial -

🔗 JS Interview Series -

🔗 Cars24 Interview Experience -

🔗 Unacademy Interview Experience -

🔗 Tazorpay Interview Experience -

🔗 React Beginner's Project Tutorials -

#JavascriptInterview #ReactInterview #ReactJS

-------------------------------------------------------------------------

00:00 Intro
01:22 Setup React with Tailwind CSS
04:08 Currency Converter Component
05:55 Conversion API
08:29 Building the UI
14:09 Fetching API Data
15:40 Cryptomus Sponsorship
16:53 Currency Dropdown Component
26:03 Swap Currencies
29:08 Conversion Logic
32:21 Add to Favorites Logic

-------------------------------------------------------------------------

⭐ Support the channel -

Special Thanks to our members -

[RoadsideCoder]

Roadside to Dream Job - Frontend Interview Prep Course 🔥🔥

[pravinprince]

thank you for the wonderful video bro, it is so helpful for me and my team, thanks again bro

[saiphaneeshk.h.]

Awesome tutorial, i really liked swapping of the currency, since the setters will be called after the function is called and at the same time, the swapping works just fine.

[piyushmandloi]

Thank you sir for this awesome content

[vilxd]

hell yeah brother
nice video i needed it

[CharanGs-ti]

let numbers = [1, 2, 3, 3, 4, 5, 5];

let uniqueNumbers = numbers.filter(function(value, index, array) {
return array.indexOf(value) === index;
});

console.log(uniqueNumbers); // Output: [1, 2, 3, 4, 5]

In this example, we have an array of numbers with some duplicates. We use the filter() Method to create a new array called “uniqueNumbers” that only includes unique values. The callback function uses the indexOf() Method to check if the current value is the first occurrence in the array. If it is, the value is included in the new array; otherwise, it is excluded.

As a result, the “uniqueNumbers” array only contains the unique values from the original array.

[CinematicClips-uzmk]

After putting the api url i got blank page

[saiphaneeshk.h.]

const currencies = new Set(["INR", "AUD", "CNY"])
const fav = new Set(["INR"])

const nonFav =

[QuantumCanvas]

I'm not getting the tailwind suggestion even after installing the tailwind intelisense extension. Only way it pulls up for me is when I press Ctlr + Space. Let me know the solution, I think I'm doing something wrong

[andrewwall]

Sorry, Tailwind sucks. Do the same video without it please. Really, there must be a dozen css libs out there. I find few of them useful. MUI is my favorite right now.