Day 16: Project UI (Expense Tracker App using React Native)

Victor Bruce-Crabbe
2 min readFeb 11, 2020

--

Figma design of Expense tracker app

It’s day 16 of my #ReactNativeIn30Days series. As part of my learning journey, I have decided to build a project at this point to put together all that I have learned within these past few days.

What I’m Building

Thinking of what to build to solidify the knowledge gain, I have decided to create a simple Expense tracker app. The Expense tracker app will basically track the day to day expense and income.

User interface design

Before jumping on to coding, I decided to come up with a sketch of the flow of the app. This is to help me know beforehand, the number of screens I will require to build.

Here is a link to the Figma design of the app: https://www.figma.com/file/wDH02FDv9okHIvssD4CUuJ/Expense-Tracker-App?node-id=0%3A1

What the App will do?

First of all, the main goal of the app is to allow a user to track expenses or income made each day.

The user starts with some amount of money in hand or to save. When an expense is made, the user keys in the amount spent and this get deducted from the total amount saved. On the other hand, when an income is made, the user keys in the amount and this gets added to the total amount saved.

As time goes on, other features will be added as and when it is needed.

Wrap up:

In today’s post, I talked about the project I will be building as part of solidifying the knowledge gained in the past few days of learning how to build mobile applications using React Native.

--

--

Victor Bruce-Crabbe

[Available for Hire]. I share my learning experience through writing based on what I will want to read when learning a new concept to help others.