- Brief -

Money Cat is a bookkeeping tool written in React, featuring adorable illustrations and powerful functionalities. It allows users to customize the starting date of their bills, input their expenses and incomes through a calculator-like keyboard, view monthly summaries and details, and easily clear erroneous data with just one click.

- Why -

The initial design of Money Cat was inspired by the fact that most bookkeeping tools set the bill cycle start date as the first day of the month, which can be inconvenient for those whose billing cycle does not start on the first day. My goal was to create a bookkeeping tool that is not only fun and adorable but also equipped with powerful functionalities and allows users to customize their bill cycle start date to better serve a broader audience.

- How -

In contrast to traditional web programming and design, I developed the front-end of Money Cat using React by constructing various components and integrating them through component replacement. The design process began by creating wireframes using Figma, where each section was divided into separate components that were later implemented using React and CSS. For the back-end, the API was linked to a PHP MySQL database, which identified user statuses based on login credentials and customized billing cycle start dates. Finally, the data was converted to JSON and utilized in the front-end for visualization purposes.

• PHP - The primary back-end development language
• React - Main development language for front-end
• CSS - Front-end page design and animation development programming language
• Illustrator - Main design authoring tool
• Photoshop - Main design authoring tool
• Figma - Design authoring tool