FinTime.

Overview

FinTime is a personal finance application developed as a Coding Camp 2026 team capstone. It combines financial summaries and purchase scenarios to help users understand their current position and the implications of different spending choices.

The interface focuses on making financial data easier to review. Balances, assets, transactions, charts, and purchase scenarios are organized into a connected experience.

Problem and objectives

Personal financial information is often spread across separate records. Knowing a balance does not necessarily provide a clear view of transaction patterns or the effect of a planned purchase.

FinTime is designed to help users:

• Review balances, assets, and transaction summaries.
• Understand changes through financial charts.
• Compare purchase scenarios, including cash and PayLater.
• Access the interface in Indonesian and English.

Interface approach

The dashboard provides the starting point for reviewing financial conditions. Responsive charts show changes in the data, while visual indicators and a financial-condition avatar provide an accessible summary.

Purchase simulations compare options using the assumptions defined for each scenario. Their purpose is to help users examine potential consequences before making a decision.

Information hierarchy, reusable dashboard components, and page transitions support a consistent experience across screen sizes.

Technical implementation

The frontend uses React 19 and Vite. React Router handles navigation, React Context manages shared state, SWR supports data fetching, and Recharts provides visualizations. Tailwind CSS supports interface styling.

Presentation components are separated from hooks, shared state, and the API client. The backend address is configured through an environment variable so that the interface can connect to the relevant service environment.

This separation supports dashboard maintenance, new pages, and change testing without concentrating all behavior in presentation components.

User workflow

1. Open the dashboard to review a financial summary.
2. Use transactions and charts to examine relevant patterns.
3. Review the available purchase scenarios.
4. Compare how the choices affect the modeled financial position.

The complete data flow depends on backend configuration and availability. Each simulation follows the assumptions defined for its scenario.

Outcomes and limitations

Development covers the dashboard frontend, financial visualizations, simulation interface, and bilingual support. FinTime is a team project; this case study focuses on information presentation and interface integration.

Simulations support scenario understanding. Their results depend on input assumptions and do not guarantee future financial conditions. Real-world validation requires testing with the backend and with users.

Next steps

Further development focuses on clearer simulation assumptions, empty and API-error states, and tests of the main workflows using representative data. Usability evaluation should establish whether the charts and scenario comparisons help users understand their choices.

Code and documentation

• FinTime frontend
• Project organization