CurrencyConverter - First React App 📈

Welcome to CurrencyConverter, my very first React application! 🎉 As a newcomer to the world of React development, I am thrilled to share this project with you. The Currency Converter is a beginner-friendly React project that allows users to convert 1 Euro to various currencies. Users can select a currency from the provided list, and the converted amount will be displayed in the footer. Additionally, the converter features a toggle button for the currency list's visibility and a search field to find specific currencies easily.

Features:

🔄 Currency Conversion: Convert 1 Euro to different currencies.

🔳 Display/Hide Currency List: Toggle visibility of the currency list with the "=" button.

🔍 Search Field Currency Filter: Search for specific currencies using the currency search field.

Project Challenges :

Components:

I successfully organized the app into different components to ensure a modular and maintainable codebase. By breaking down the user interface into smaller components like Header, Currencies, Amount, and Button, I improved code readability and reusability.

State:

Understanding and utilizing the concept of state in React was crucial for this project. I efficiently updated state properties, such as currenciesOpen, baseAmount, currencyName, and inputSearch, to achieve dynamic behavior and real-time updates.

Props:

Implementing props allowed me to pass data between parent and child components seamlessly. This feature proved essential in displaying the converted amount and handling click events on currency items.

Classes:

In this project using classes and understanding their role in state management allowed me to make a smooth transition to learning React hooks. Hooks offer a more concise and intuitive way to work with state and lifecycle functionalities. By building a solid foundation with classes, I was able to appreciate the benefits of hooks and understand how they simplify component logic and improve code readability.

SASS:

Sass proved to be a powerful tool for managing styles efficiently. I utilized variables from the _variables.scss file to maintain consistent colors throughout the app. Nesting styles allowed me to write cleaner and more organized CSS rules.

Installation:

1. Clone the repository

git clone https://github.com/your-username/CurrencyConverter.git

2. Navigate the project directory:

cd CurrencyConverter

3. Install the required dependencies using Yarn:

yarn install

4. Run the development server:

yarn dev