I often travel abroad and currency exchange is somewhat I need to deal with in every trip. There are a lot of great apps out there but they also usually come with ads. After having finished a few courses and guides about React, I wanted to get started with a real project whose features and scopes are defined by myself. That’s my main motivation for this project!
I have several goals for this project:
- Connect all the dots about building a React app, even with a simple one
- Have all features I want: convert one base currency to multiple ones, work offline, and some basic settings such as exchange sources, dark mode, font-size.
To get started, I followed Thinking in React from the official React document. I basically did all what it recommends: defined what I want, built a static version (with only props rather than state), added state, and handled its behavior. Here is one of my sketches:
Just after having a good HTML structure and working version, I started adding CSS to polish my app. This may be different from many other people as they may want to have a good look-and-feel before dive in real interactions.
Lastly (till now), I added more type checking with PropTypes, switched all of my components from traditional classes to functions and hooks, then applied Context rather than passing data top-down (aka lifting state up).
I have learned up many simple things to make code cleaner, thanks to my friends’ feedback and even subtle things like
Date.now vs Date.now().
And of course, I have enhanced my mind for the concept of React and the way it works.
I would say that my version 1 for this app is ready to use for everyone. I will work and add some other features to its version 2 including working offline and more settings!
I wanted to give this app a try with the famous state management Redux. However, that will require so much change and I do not want to do that. Instead, I will keep this project to continue using and learning Context. It seems that React will bring Context to a new level so it’s still good to have a playground for it!