1
showcase
Shipped: Currency converter with live rates
I built a responsive Exchange Rate Converter that fetches exchange rates from a public API and focuses on clearly handling different application states.
What I Built
1. Currency Conversion
* Users can enter an amount and select the source and target currencies.
* The application fetches the exchange rate and displays the converted amount.
* A swap option is provided to quickly switch currencies.
2. Loading State
* While the API request is in progress, the application shows a clear loading indicator and message.
* This makes it clear that the system is working and the result has not arrived yet.
3. Error State
* If the API request fails, a separate error state is displayed.
* The message explains what went wrong and tells the user what they can do next, such as retrying the request.
4. Empty State
* If the request succeeds but the API does not provide a rate for the selected currency pair, the application shows an empty/data-gap state.
* It does not incorrectly treat missing data as a zero value.
5. Success State
* When a valid exchange rate is available, the application displays the rate and the converted amount clearly.
How a Reviewer Can Verify the Acceptance Criteria
The reviewer does not need to modify the source code to test the required states.
Success: Open the application normally and perform a conversion.
Loading: Open the application with
?state=loading.
Error: Open the application with ?state=error.
Empty: Open the application with ?state=empty.
This allows the reviewer to directly verify that Loading, Error, Empty, and Success are separate and clearly distinguishable states.
Acceptance Criteria Covered
* Loading, Error, and Empty states are visually and textually different.
* Errors explain what failed and what the user should do next.
* Missing exchange-rate data is treated as a data gap rather than displaying 0.
* Unsupported currency pairs are presented as an Empty state, not as an application error.
* All required states are demonstrable without changing the code.
* The README provides instructions for testing each state.
Repository: https://github.com/techtuber9988/exchange-rate-converter
Live: https://exchange-rate-converter-sooty.vercel.app/
Built for the Verified Frontend Internship · state and dataAdd a comment
0/2000