Currency Conversion – My React Side Project

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!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s