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!
Have a quick look at demo or code on Github!
Goals
I have several goals for this project:
- Connect all the dots about building a React app, even with a simple one
- Solve all issues with as less JavaScript and front-end (e.g. Bootstrap) libraries as possible
- 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.
Process
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:
The state was a bit more complicated when I wanted to handle fetching exchange rates and display proper messages for users to know what’s going on. As a beginner in both React and modern JavaScript, these simple things are relatively hard for me. The interesting thing is that I could think of issues and solve them on my way. For a serious project, this is not recommended but for a new learner like me, this provides a lot of values and gives me chances to read a bunch of documents!
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).
Lessons Learnt
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().
I also have heard a lot of techniques in JavaScript such as Promise, async await, fetch, localStorage, etc but I have had not been really into them yet.
And of course, I have enhanced my mind for the concept of React and the way it works.
Next
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!
Today Dat Learned 