Guided: Build a Multi-page React App with TypeScript and React Router

Lab Overview

In this lab, you will create a simple personal finance tracker using ReactJS and TypeScript.

At the minimum, your application will include:

• A page to create and list transactions
• A page to visualize expenses
• Navigation between these two pages using React Router

Note: You can run the app at any time by clicking the Run button or by running the npm run dev -- --host command in the Terminal. Then refresh the page in the Web Browser tab to view the app.

Getting Started

To simplify the setup, all required dependencies have already been added to the project. To enable routing, you only need to add the necessary code to the App.tsx file. info> With your app running, you can visit the app at anytime by visiting {{localhost:5173}}

Observe the Default Form Behavior

Now your app is running and you will see two links on the header, called Transactions and Summary.

Click Transactions and you will see the Transactions page. There are no transactions added yet. You will see the button called + New Transaction. Click on it and you will see the form to add a new transaction.

At this point, if you click on Submit button, you will see that it adds a new transaction with empty values. You can confirm this by checking the table on the Transactions page.

• The Name is empty
• The Amount is 0

This is not what you want. You only want to enable the Submit button when the form is valid.

Style the Form with Tailwind CSS

You may have noticed, the form that was created in the previous step is not very pretty. You can fix that.

You'll leverage Tailwind CSS to style your form. Tailwind CSS is a framework for quickly constructing user interfaces. It is a very popular framework and is used by many companies, including Amazon, Microsoft, and Atlassian.

The nice thing about Tailwind CSS is that it is very easy to use. You don't need to know CSS to use it. You just need to know how to add classes to your HTML elements.

This project already has Tailwind CSS installed. You'll use it to style your form.

Start by making the Transactions title look like a heading. Currently, it looks like a regular text. Now, as you click on the + New Transaction button, you will notice that the Name and Amount labels are not looking bold, while the Category label is.

You can fix that. Now, repeat the same for the Amount label. Great! This all looks good. Finally, if you look at the Cancel button, it looks more like a link than a button.

Next, you'll fix that. This change adds a rounded border to the button and sets its background color to white. It also changes the background color to gray when you hover over it.

As you can see, Tailwind CSS is very easy to use and using a few utility classes, you can create a beautiful UI for any app.

If you are interested in learning more you can check out the Tailwind CSS Documentation.

Understand Currency Exchange Rates

These days, it is common to pay for services in different currencies. For example, if you are in the US and pay for a service based in Canada, you will pay in CAD. If you pay for a service in New Zealand, you'll pay in NZD.

At any given time an amount in one currency is equivalent to a different amount in another currency. This is called the exchange rate. Exchange rates change all the time.

Next, you'll update your project to use a function that exchanges rate between two currencies. Now, when you click on the + New Transaction button, you will see a new radio button called Currency. This will allow you to choose a currency for each transaction.

This behavior is implemented using conditional rendering. The Currency radio button is displayed only when the ENABLE_CURRENCIES constant is set to true.

Visualize Transactions with a Bar Chart

Now that you have the ability to add transactions, including the transactions in different currencies, you should now work on visualizing the data.

The most common way to see expenses is by which category they belong to. In your form, there are three categories: Food, Transportation and Entertainment.

The simplest and most effective way to visualize this data is by using a bar chart. You will be using recharts for this purpose. Recharts is a charting library built on React and D3. It is very easy to use and has a lot of features.

This project is already using recharts. If you are curious, you can check out the code in src/components/Summary.tsx and look at the ShowBarChart component.

The visualization is rendered on the /summary route. You added this route in the first step and will be using the same route to show the bar chart.

The /summary route gets the Transaction data from the TransactionContext component and passes it to the ShowBarChart component. There are two situations that can happen when you visit the /summary route:

1. There are no transactions
2. There are transactions

You need to handle both situations in your code. Now, you need to handle the case when there are transactions. You will be using the ShowBarChart component for this purpose. Now, when you visit the /summary route, you should see a bar chart.

If you don't see a bar chart, it's possible you have not added any transactions. Add some transactions and then visit the /summary route.

Remember:

Do not do a page reload between changing routes. This will cause the state to reset and you will not see any transactions.

This can be fixed with multiple strategies that are not in the scope of this lab.

That's it! You have successfully completed this lab.

Apply Currency Conversion to Transactions

Now you need to use currency conversion when adding a transaction.

Currently, if you add a transaction and select a different currency, the amount does not change. That is because the exchange rate function is not being called or used in your calculations.

The function is already available, you just need to use it in the right place. The rate is used to calculate convertedAmount which takes the amount in USD and multiplied by the rate to get the equivalent amount in the USD. You will use this convertedAmount and save in the state using setTransaction.

The setTrasaction method is created by the useState hook. It takes in the new value for the state and updates it.

Now that you have a conversion working, it would be a good idea to also display the conversion rate when the selected currency is not USD.

You can do that next. Now, when you add a new transaction, the default currency is still USD.

However, with the changes you made now, whenever you select a different currency, the amount will be converted to its USD equivalent and saved in the state. You also see the conversion rate when the currency selected is not USD.