Do you want to learn React, TypeScript or Web Storage API? This tutorial will help you with it. Step by step, it will help you build your own budget app using these technologies. Learn React, TypeScript and Web Storage API while building your own budget app!

How to Build a Budget App With React, Typescript & Web Storage API Part 2.

You can find the code on my GitHub (make sure you are on “blog-tutorial” branch).

Introduction

At the end of this tutorial you will have a working budget app with following features. First, it will allow you to set a budget. You will also be able to choose in what currency you want the budget to be. Don’t worry. You don’t have to remember any codes. App will help you choose the currency code from options provided by datalist.

Second, it will allow you to choose a budget period-daily, monthly or yearly budget. Third, it will allow you to create a list of items, things, you either will buy or you already bought. Then, depending on the payment status, paid or not paid, it will show you how much budget remains. Or, if you are already in red numbers, if you’ve spent your entire budget.

Lastly, it will also allow you to store your data, items on the list and app settings, in app state or in localStorage or sessionStorage, using Web Storage API. Thanks to web storage API, you will be able to keep your data even if refresh your app in the browser. Well, only if you decide to use local or session storage as your preferred storage method. Otherwise, it will be erased.

As I mentioned, the tech stack for this budget app will be React, TypeScript and Web Storage API. In addition you will also use React Router. You will use this library to create routing for homepage and Settings page of your budget app. That’s for the introduction. Now, let’s get to work.

#typescript #react #javascript #design development #web storage api