UI/UX / Web DevelopmentAcademic project2026

WealthWise

A personal finance web app that tracks accounts, transactions and budgets, and adds AI on top: it reads receipts from a photo, answers questions about your own money and scores your financial health. A group project for the course Platform-Based Applications.

View the code on GitHub

Role: Designer and Developer
Year: 2026
Team: Team of 6 students
Platform: Web
Tools: React, Tailwind CSS, Laravel, Groq

Dashboard with a green card showing total net worth, total income and expenses and a donut chart by category, quick actions for scanning a receipt and asking the AI planner, and a table of recent transactions. — Dashboard: total net worth, income and expenses, spending by category and the latest transactions.

Transactions page with filters for date range, account and category, cards for total income and expenses, and a table of transactions with edit and delete buttons. — Transactions: filter by date, account and category, with totals and edit and delete actions.

Categories page with a monthly budget summary and a card for each expense category showing how much of its budget is spent. — Categories: a monthly budget for each expense category, with progress on what has been spent.

Smart Planning page with an overall savings progress ring and cards for each savings goal showing the amount saved, the target and a progress bar. — Smart Planning: savings goals with the amount saved, the target and the amount to set aside per period.

Statistics page with total expenses, net savings, a list of top categories, a donut chart of expense composition and a bar chart of weekly activity. — Statistics: expenses by category, top categories and weekly activity for this month, the last 3 months or this year.

Financial Health page with a score gauge of 80 and cards for net worth, saving ratio, expense ratio and emergency fund. — Financial Health: a score from 0 to 100 with saving ratio, expense ratio and emergency fund.

Accounts page with the total balance and cards for a cash, a bank and an e-wallet account, plus a chart of how assets are distributed. — Accounts: the total balance and each cash, bank and e-wallet account.

Overview

WealthWise is a personal finance web app. It records accounts, income and expenses, sets a budget for each category and tracks savings goals. On top of that it adds AI: it reads a receipt from a photo, answers questions in a chatbot, writes a daily insight and gives a financial health score from 0 to 100.

Context

We built it as a group project for the course Platform-Based Applications (Aplikasi Berbasis Platform) in semester 6, in a team of six students.

AI features

Receipt scanner: upload a photo of a receipt and a vision model fills in the merchant, the amount and the date of the transaction.

Financial chatbot: it answers from the user's own data, such as the saving ratio, the expense ratio, the months of emergency fund and the health score.

Daily insights: the AI looks at the user's financial profile and suggests prioritised recommendations. The health score itself is calculated from the saving ratio, the expense ratio and the emergency fund.

Tech stack

The front end uses React, Vite, Tailwind CSS, React Router and Recharts. The back end is a Laravel REST API with token authentication (Laravel Sanctum) and email verification with a six-digit code. The database is SQLite or PostgreSQL. The AI features call the Groq API with Llama models, and the back end can run in Docker.

My contribution

I worked on the UI/UX design, the React front end, the Laravel back end and the AI features, together with my team. The exact split of work is not available yet.

Status

The original database is no longer active, so the screenshots come from a local copy of the project. The accounts, transactions and amounts in them are sample data. The AI features need an API key, so they are described here but not shown.

Team

students, I worked on design and code

AI features

receipt scanner, chatbot and daily insights