Full-Stack Web Development

Expense Tracker

A full-stack expense tracking application with an ASP.NET Core API and Blazor WebAssembly client, supporting category and date filtering, expense CRUD, pagination, and monthly spending summaries.

Technologies
C#ASP.NET Core Web APIBlazor WASMEF CoreSQLiteSwagger
Codebase View Repository

Project Overview & Context

  • The Problem: Individual budget tracking is often neglected due to complex or clunky user interfaces. Users need a fast, visually responsive tool to classify spending, review category breakdowns, and handle transactions immediately.
  • The Solution: A modern decoupled full-stack web application. It uses a lightweight Blazor WebAssembly single-page application (SPA) on the client-side connected to a fast, strongly-typed ASP.NET Core Web API on the backend[cite: 4, 5].

Key Features & User Flow

  • Dashboard Analytics: Dynamic summaries showing compiled expenditures broken down by custom financial categories and date ranges[cite: 4, 5].
  • Transactional CRUD Operations: Instantly create, read, update, and delete expense entries via clean asynchronous API payloads[cite: 4, 5].
  • Advanced Data Filtering: Filter expenses by date ranges, category tags, or key terms, backed by database-level pagination for fluid loading[cite: 5].
  • API Explorer: Fully documented backend endpoints utilizing Swagger/OpenAPI specifications for developer testing[cite: 4, 5].

Technical Architecture & Tech Stack

  • Client App: Built with Blazor WebAssembly (WASM), executing entirely in the user’s browser to deliver single-page-app speed and zero-lag state transitions[cite: 4, 5].
  • Server App: Powered by an ASP.NET Core Web API using a controller-based pattern to safely decouple business layers from presentation logic[cite: 4, 5].
  • ORM & Storage: Driven by Entity Framework Core using code-first migrations mapped to a lightweight, performant SQLite relational database[cite: 4, 5].

Engineering Challenges & Solutions

Unhandled Database Exceptions & Public Stack Leaks

  • Situation: Direct database constraints or execution errors threatened to leak internal server stack traces to the frontend client, posing security risks and creating ungraceful SPA freeze-ups.
  • Task: Intercept runtime processing errors globally, sanitizing application exceptions before they reach the network boundary.
  • Action:
    1. Engineered an isolated GlobalExceptionHandlingMiddleware layer directly into the ASP.NET Core pipeline.
    2. Overrode default error bubbles to systematically catch database anomalies, format them into structured JSON problem responses, and map them to clean HTTP status codes.
    3. Rewrote the frontend ExpenseApiClient handlers to gracefully parsing these uniform error objects and feed actionable alerts back to the user interface.
  • Result: Secured internal infrastructure contexts from public view while ensuring complete client UI stability during runtime database exceptions.

Gambaran Keseluruhan & Konteks Projek

  • Masalah: Penjejakan bajet peribadi sering diabaikan disebabkan antara muka pengguna yang rumit atau lambat. Pengguna memerlukan alat yang pantas dan responsif secara visual untuk mengelaskan perbelanjaan, menyemak pecahan kategori, dan mengendalikan transaksi serta-merta.
  • Penyelesaian: Aplikasi web stack penuh berasingan yang moden. Menggunakan aplikasi halaman tunggal (SPA) Blazor WebAssembly yang ringan di bahagian klien dan terhubung kepada API Web ASP.NET Core yang pantas dan berelemen di bahagian belakang.

Ciri-Ciri Teras & Aliran Pengguna

  • Analitik Papan Pemuka: Ringkasan dinamik yang memaparkan kompilasi perbelanjaan mengikut kategori kewangan tersuai dan julat tarikh.
  • Operasi CRUD Transaksi: Membina, membaca, mengemas kini, dan memadam entri perbelanjaan serta-merta melalui beban API tidak segerak yang bersih.
  • Penapisan Data Lanjutan: Menapis perbelanjaan mengikut julat tarikh, tag kategori, atau istilah utama, disokong oleh paginasi peringkat pangkalan data untuk pemuatan yang lancar.
  • Penjelajah API: Titik akhir bahagian belakang yang didokumenkan sepenuhnya menggunakan spesifikasi Swagger/OpenAPI untuk ujian pembangun.

Seni Bina Teknikal & Stack Teknologi

  • Aplikasi Klien: Dibina dengan Blazor WebAssembly (WASM), berjalan sepenuhnya di dalam penyemak imbas pengguna untuk memberikan kelajuan aplikasi halaman tunggal tanpa sebarang sela masa semasa peralihan keadaan.
  • Aplikasi Pelayan: Dikuasakan oleh ASP.NET Core Web API menggunakan corak berasaskan kawalan untuk mengasingkan lapisan perniagaan daripada logik persembahan secara selamat.
  • ORM & Penstoran: Disokong oleh Entity Framework Core menggunakan migrasi kod dahulu yang dipetakan ke pangkalan data hubungan SQLite yang ringan dan berprestasi tinggi.

Cabaran Kejuruteraan & Penyelesaian

Ralat Pangkalan Data Tidak Dikendalikan & Kebocoran Surihan Tindanan Awam

  • Situasi: Kekangan pangkalan data secara terus atau ralat pelaksanaan berisiko membocorkan surihan tindanan pelayan dalaman kepada klien hadapan, mendedahkan risiko keselamatan dan menyebabkan pembekuan SPA.
  • Tugasan: Memintas ralat pemprosesan masa nyata secara global, membersihkan ralat aplikasi sebelum ia sampai ke sempadan rangkaian.
  • Tindakan:
    1. Membina lapisan GlobalExceptionHandlingMiddleware berasingan secara terus ke dalam saluran ASP.NET Core.
    2. Mengatasi ralat lalai untuk menangkap anomali pangkalan data secara sistematik, memformatkannya menjadi respons masalah JSON berstruktur, dan memetakkannya ke kod status HTTP yang bersih.
    3. Menulis semula pengedali ExpenseApiClient bahagian hadapan untuk menganalisis objek ralat ini secara lancar dan memaparkan amaran yang jelas kepada antara muka pengguna.
  • Hasil: Mengamankan konteks infrastruktur dalaman daripada pandangan awam sambil memastikan kestabilan antara muka klien semasa ralat pangkalan data berlaku.