Expense Tracker

Role

UI/ UX Designer

Front-end Developer

Back-end Developer

Stack

HTML5

CSS3

ES7

React

MongoDB

Express

NodeJS

Time

Mar 20 -

Jun 24, 2020


Summery

The expense tracker aims to assist a user in managing personal finances by offering not only a basic expense check but also a brief analysis of incomes and expenses. All operations are performed in private through a personal account.

The project is a MERN stack application, deployed on Heroku. The front-end was developed in HTML5, CSS3, and React.js while the back-end was created in Express and Node.js. The data was stored in MongoDB Atlas and users can only access their own data but other’s.

Live Demo(Press Login/ Sign up an account)


User Story

After login, the user can access the following key features:

  • Add/ Edit/ Delete a transaction: The user can create a new income or expense transaction which can be deleted or modified after the creation.

  • Check recent transactions: The user will see all transactions took place in the last three days and the sum of income, expense and balance in the personal dashboard.

  • Check history transactions: The user can also check the list of previous transactions along with the sum and ratio of income and expense in a day, a week, a month and a year.

  • Get an overview of incomes and expenses: All transactions of the user are accumulated to the daily, weekly and monthly total sum and visualized as a histogram. The user then gets a better understanding of the weekly, monthly and yearly fluctuation of incomes and expenses.

User stories illustrated with a flow chart
User stories illustrated with a flow chart
Main screens
Main screens
Wireframe
Wireframe

Interface Design

The visual style of this project was inspired by Andrew Tanchuk's concept, Personal Budget App. Then, a design system was formulated based on the same philosophy such as the color theme and the flat design. Next, the wireframe of screens was elevated to high-fidelity interface design by applying the design system.

Design system
Design system
Visual design of screens
Visual design of screens

Web Development

The project is a MERN stack application, deployed on Heroku. Since personal financial records are sensitive information, it is necessary to keep personal data in private. Therefore, user authentication was required and verified with JSON Web Token (JWT). By doing so, a user can login and log out with a personal account.

    • Front-end

    The front-end was built with responsive modern technologies (HTML5, CSS3, React.js) and complimentary by a front-end library, Material-UI. The data analysis was achieved by visualizing transaction data with D3.js. Besides, React-spring was utilized to add lively animations to the react application.

    • Back-end

    A REST API for the project was created with Express, Node.js while the data was stored in MongoDB Atlas, a NoSQL and document-oriented database in the cloud. Then, a user can perform CRUD operations through this API such as create, read, update, and delete data.

add new transaction
Adding and edit a transaction
check summery of transactions
Check record and summery of the day, week, etc.