chikamichi / fxpocket Goto Github PK

View Code? Open in Web Editor NEW

0.0 1.0 0.0 733 KB

fxPocket — A lightweight, in-browser currency converter.

Home Page: https://fxpocket.netlify.com/

HTML 4.61% CSS 5.40% JavaScript 89.99%

fxpocket's Introduction

fxPocket

A simple currency converter, live at https://fxpocket.netlify.com/.

TL;DR:

Install required dependencies with:

# Install Node.js first (https://nodejs.org/en/)
npm install

Start the web server with:

npm start

Then go check http://localhost:3000/.

Documentation is available at https://fxpocket-docs.netlify.com/.

Specs & Tests

High-level specs are available in docs/features.
Unit and integration tests may be run with npm run test.

A Student's Noteworthy Features

Pull Request #2 demonstrates Test-Driven Development (TDD), in a newcomers-friendly, step-by-step fashion.
Pull Request #9 demonstrates implementing an API-aware component's lifecycle, showcasing underlying limitations at the same time.
Pull Request #11 demonstrates the "Lifting State Up" pattern.
Pull Request #15 demonstrates dealing with a more complex PR, including review and incrementally fixing code chunks based on peer-feedback.
Pull Request #21 demonstrates TDD bug-fixing within a grown-up project.
Pull Request #23 demonstrates separating concerns between fetching and rendering data, as well as mocking external dependencies & requests in tests.
Pull Request #36 demonstrates documenting a code-base.

Quality of Life

This project was bootstrapped with Create React App the following way:

npm install -g npx # https://github.com/zkat/npx
npx create-react-app fxpocket # https://github.com/facebook/create-react-app

Create React App does all the heavy-lifting. More information about Create React App is available here.

Suggested Atom plugins for this project:

fxpocket's People

Contributors

Watchers

fxpocket's Issues

Implement basic layout

Let's bootstrap the project with a UI-first mindset!

Feature: Self-explanatory, basic layout
  In order for the app to be most useful
  Its layout should be enough to have the user understand both:
  - its core feature (currency conversion)
  - its usage (picking a currency & setting an amount on either column).
  
  Scenario: User is presented with a default layout
    Given I just loaded the app
    Then I should see two currency column
    Then the "quote" currency column should be "EUR"
    Then the "counter" currency should be "USD"
    Then the amounts should be empty

Proposed layout:

+-------------------------------------------------+
|                                                 |
| +---------------------+  +--------------------+ |
| |                     |  |                    | |
| | +-----------------+ |  | +----------------+ | |
| | | EUR           v | |  | | USD          v | | |
| | +-----------------+ |  | +----------------+ | |
| |                     |  |                    | |
| | +-------------+     |  | +------------+     | |
| | |             | EUR |  | |            | USD | |
| | +-------------+     |  | +------------+     | |
| |                     |  |                    | |
| +---------------------+  +--------------------+ |
|                                                 |
+-------------------------------------------------+

Allow to add/remove currency widgets

Feature: Self-explanatory, basic layout
  In order for the app to be most useful
  Its layout should be enough to have the user understand both:
  - its core feature (currency conversion)
  - its usage (picking a currency & setting an amount on either column).

  Scenario: User can add a currency widget
    Given I just loaded the app
    When I click on the "+" button
    Then an additional currency widget should be appended

The scenario doesn't state which currency should be picked in the new currency widget, neither does it tell what happens when all available currencies are displayed in a dedicated widget, or forbid from adding several widgets with the same currency. Expand on this scenario to document the whole UI/UX in relation with this feature.

Weird quote currencies behaviour with five+ digits numbers

Editing the quote widget's amount to something larger than four digits fails in a weird way.

Example:

EUR -> USD
Enter 11111 in the quote's amount
As soon as the fifth 1 is typed, amount changes to 11110.99.

It's probable an issue with Utils.round, which is already causing problems somehow - see #37.

Fetch currencies only once

<Currency /> should not be responsible for fetching the list of currencies, as there are several such components. Fetch data once in a container component (App?) and have Currency components be presentational.

Quote vs counter currency

⚠️ Alert! ⚠️

Contrary to what I had been saying starting with PR #21, there is a need to distinguish between base and quote currencies. Or widgets, all the same.

I checked the .gif mockup and upon editing the second/quote widget's currency, its very amount gets updated, not the first/base one's.

Basically we want the base widget to always keep its amount fixed (unless the user edits it). It's the base amount 💰

Support live conversion of amounts

Feature: Self-explanatory, basic layout
  In order for the app to be most useful
  Its layout should be enough to have the user understand both:
  - its core feature (currency conversion)
  - its usage (picking a currency & setting an amount on either column).

  Scenario: User enters an amount which is immediately converted
    Given I just loaded the app
    When I enter a digit in the left currency widget's input
    Then the matching conversion should be displayed in the right widget's input

The UX motivation is to keep going with the "self-explanatory" UI where a user's actions immediately translate into visible side-effects.

Use Flow to statically type check the code base

Flow would be a great addition to the project:

static type checking;
better in-code documentation of React concepts (props, states…) and components;
re-use of said concepts/types in ESDoc;
cover tricky edge-cases such as enforcing StaticUI to only accept App.

Load all available currencies at startup

Currently widgets are limited to just EUR and USD, yet fixer.io provides 30 additional currencies!

Enhance look 'n' feel

On top of my head, we'd need to:

make the app more appealing;
clarify what a "currency widget" is.

Picking a different currency should update the other amount

I think you had it the other way around @chikamichi. The current implementation is such that when you have a certain amount in a widget and switch that widget's currency, the very widget's amount gets converted; whereas the user is very likely to expect the widget's amount to stay the same and the other widgets' amounts to update accordingly to the new base/quote currency which has been selected.

Cannot enter decimal amounts

Cannot enter floating numbers.
Cannot enter 0 (which is annoying if one wants to enter, say, 0.5).

Handle API not being available

App needs error handling.

Borrow some ideas from http://paolo.fr/#Async/await-without-Promises for Fixer's API.

Convert from url params

It would be nice allowing state inference from url, so that opening http://{fxpocket}/100/eur/usd/aud would automatically open three widgets, with 100 EUR for the base currency and conversions made in USD and AUD.

No idea what the URL scheme should be though.

Rework base currency's autofocus

In #30 I had to disable autofocus for it wasn't playing nice with editing quote currency widget's amount.

Find a way to autofocus only once, at startup.

UI should make base and quote currencies explicit.

Self-explanatory UI is what we're aiming for, and right now it's quite implicit which widget holds the base currency and which one maps to the quote currency. Some issues I see with that:

The implied convention is left->right, which is not worldwide common sense.
fxPocket virtually supports enabling several quote widgets, that would be confusing.
We want a self-explanatory UI 🙈

Conversion "fails" when rate is low

Say 1 ABC = 0.05 XYZ. Then the currency widgets freak out and don't display a result due to rounding issues.

When rate is that low, you should find a way to either present data or an "error" message. I guess users should enter a large-enough amount, but currently they are prevented from doing it because insta-refresh keeps the input fields empty, no matter how much gets typed in.

Let user select a different currency

Feature: Self-explanatory, basic layout
  In order for the app to be most useful
  Its layout should be enough to have the user understand both:
  - its core feature (currency conversion)
  - its usage (picking a currency & setting an amount on either column).

  Scenario: User selects a different currency which updates counter amount
    Given I just loaded the app
    And I got some amount converted
    When I select a different currency in the left currency widget's dropdown
    Then the matching conversion should be updated in the right widget's input

The UX motivation is to keep true to the "self-explanatory" UI where a user's actions immediately translate into visible side-effects.

Filter invalid currencies out

I tried to add a dummy currency in the initial state's widgets list and it renders a currency widget as expected, but obviously this leads to a broken app as soon as you start interacting with it. I think you should filter out invalid currencies from the widgets list.

Document noteworthy features for students

fxPocket is built with the explicit goal of demonstrating & explaining development technics, such as BDD, TDD, React best practices, etc. Start documenting areas of interest in the README as a way to discover the code base :)

Fetch currencies from fixer.io

Fixer — Foreign exchange rates and currency conversion API.

Consume https://api.fixer.io/latest and populate fxPocket with supported currencies. Still pre-select EUR (quote) and USD (counter) currencies.