LVT
Le Van Truong
All Engineering Systems (18)
Software EngineeringCompletedPublic Repository
Case Study 14 · 2025 · Full-Stack Developer

SmartSpend

Full-Stack Personal & Group Finance Platform with Gemini AI Advisory

A React and TypeScript personal and group expense management web application featuring collaborative budgeting workflows, Firebase persistence, and a Gemini-powered financial assistant.

Headline Empirical Metrics
Stack
React · TS · Gemini
Vite + Firebase + Gemini API integration
02 · Problem Statement

The Technical Bottleneck

Managing shared group expenses and personal budgets often requires switching between static spreadsheets and disconnected tracking apps without intelligent spending insights.

03 · Research Motivation

Why Existing Baselines Fail

Combining structured transaction tracking with an LLM financial assistant enables conversational budget analysis grounded in actual user categories.

04 · Proposed Approach

Core Formulation & Insight

Engineered a modular React/TypeScript frontend (Vite) paired with Firebase client services and a backend service layer integrating the Google Gemini API for contextual financial Q&A and budget recommendations.

05 · System Architecture & Pipeline Stages

Architectural Design

Client-server web architecture integrating React/TypeScript UI workflows, Firebase state persistence, and a Gemini API advisory service.

Stage 01

1. Personal & Group Expense Workflows

Supports transaction logging, category budgeting, and shared group expense splitting.

Stage 02

2. Firebase Client & Service Layer

Manages user state, structured expense records, and modular API services.

Stage 03

3. Gemini AI Financial Assistant

Connects transaction summaries to the Gemini API via environment-configured backend endpoints.

06 · Engineering Implementation

Technical Stack & Systems Engineering

Languages
TypeScriptJavaScriptHTML/CSS
Frameworks & Libraries
ReactViteFirebaseNode.js Mock/API Server
Backbone Models
Google Gemini API
Compute & Storage Infrastructure
Vite Frontend + Port 5000 API Service

Implementation Highlights

  • →Clean separation of UI pages, financial calculation services, Firebase client, and Gemini assistant integration.
07 · Experimental Setup

Datasets & Protocol

Datasets & Corpora

  • Interactive Personal & Group Budgeting Workflows

Evaluation Protocol

Functional verification of expense tracking, group splitting, and Gemini API advisory responses.

Tracked Evaluation Metrics

End-to-End Workflow Completeness
08 · Quantitative Results & Analysis

Delivered a complete React/TypeScript finance application with integrated Gemini conversational budget assistance.

Stack
React · TS · Gemini

Vite + Firebase + Gemini API integration

Empirical Analysis & Interpretation

Demonstrates practical full-stack product engineering alongside AI API integration.

09 · Primary Technical Contributions

What This System Contributes

  • 01Developed the frontend architecture, budgeting workflows, and Gemini service integration.
10 · Limitations & Scope Constraints

Boundary Conditions & Future Work

  • ·Configured for local/mock backend server and Firebase development environment.