Currency Exchange Mini-App
💰This is a mini app playground to display currency exchange in React + Redux + Redux-Saga and TypeScript.
- The Demo version here
- The Real Fake Dummy Weird Api (keep in mind these rates are from a week before)
The Proxy Api(deleted)
Summary
- Demo
- Quick preview
- Requirements
- Available Scripts
- Preview (screenshots)
- Tests Coverage
- Ideas
- Learn more
Quick preview
Requirements
- Node =
14.*
- Yarn =
1.*
Available Scripts
In the project directory, you might run:
make start
It also correctly bundles React in production mode and optimizes the build for the best performance and extract it to the build
folder and start the application.
make dev
ps. Remember you can also use production's URL directly here.
Runs the app in the development mode. 🔥
Make sure you manually open http://localhost:3000 to view it in the browser.
Note: You'll also need to run make api
in order to get the API running in development.
make api
Run the API and let it up for development tests.
make test-stuff
Launches the test runner in the interactive watch mode.
make test-coverage
This will generate a coverage folder with more details to be exported afterwards.
make i
| make install
Install dependencies from yarn's package.json.
make help
Please execute that in order to be aware of what commands you might be able to run.
Preview
Warnings messages
📷 Minimum amount
📷 Exceeding balance
Forex rates updates
This happens every 10s even though it could be techinically problematic
Balance related
These following screenshots are related to balance features
📷 Balance update confirmation
📷 Balance update succeed
📷 Failures
Failures also display UI error handler messages
Tests Coverage
📷 Screenshot of percentage
There's no codacy-like for displaying coverage results so I decided to paste here the screenshot directly.
Note.1: run make test-coverage
in order to generate coverage around the tests.
Note.2: this is eventually testing our integration and unit tests around the application.
Ideas
- UX
- I understand there's a big bug around converting from BTC to another currency;
- This could have been handled in another time but as I didn't want to spend a long time on ther exercise I preferred to keep it simple!
- I understand there's a big bug around converting from BTC to another currency;
- Acessibility
- This application is not very acessible since I did not want to spend a lot of time improving it since I assumed my architecture skills should be taken into account more than reckon with accessibility related stuff.
- Architectural
- Many things here could have been improved such as folder structures, api calls, error handling, logs, etc;
- I think we should review peer dependencies on packages.json - we could use some sort of
Dependabot
in order to make it able to recognize security updates (even GitHub) could do that for us; - Design system could be a extracted package on its own since there are many ways of setting colors and variables across the styles (app level);
- Integration tests
- There's a lot of space for improving tests and, of course, improving the concept of TDD (which was not applied during the development of this app);
- Unit tests
- I ended up not adding tests to the slices since they are part of the "up and running" state of our integration tests "CurrencySelection.test.tsx" which is eventually our happy path execution;
- Api-like tests
- I haven't added many but at least the part where I randomize data for our fake api
- Performance
I believe there's a lot of space for performance here - Reusable Code
- I'm not very prod of the usage of styles module across the application, this could have been better refactored in order to reuse cascades and their childs in different parts of components containers.
- I could add a Storybook here in order to re-use components for instance the amount input or even the select box for a real world app.
Learn More
Visit my corner on the web: guicheffer.me