Ezpense: An AI Receipt Scanner + Expense Dashboard with KendoReact and Supabase

Ahmad Nurfadilah — Mon, 29 Sep 2025 06:59:27 +0000

This is a submission for the KendoReact Free Components Challenge.

What I Built

Ezpense is an AI‑powered expense manager with receipt scanning that turns messy receipt workflows into fast, reliable, and anonymous expense tracking.

Background and Motivation

Manual expense entry is slow, error‑prone, and easy to avoid—especially when you’re juggling multiple receipts each week.
Freelancers and small business owners often need evidence (receipts) plus structured data (amount, vendor, date, category) for tax prep and reporting.
The goal: cut the time from “receipt in hand” to “tracked expense with analytics” from minutes to seconds—without forcing users to sign up.

What It Does

Drag‑and‑drop receipts (JPG/PNG/PDF), simulate OCR extraction, and attach confidence scores.
Review and edit extracted fields before saving to the database.
Visual dashboard showcasing spending insights, budget progress, and category breakdowns.
Anonymous authentication so users can start using the app instantly—no sign‑up wall. Built following Supabase’s Anonymous Sign‑Ins guidance: Supabase Anonymous Sign‑Ins docs.

Who It’s For

Small business owners and freelancers who need to keep receipts organized and prepare for taxes.
Anyone looking for a modern, private, low‑friction expense tracker.

Demo

Live demo: https://ezpense.vercel.app
Repo: https://github.com/ahmadnurfadilah/ezpense

How It Works (Architecture)

UI: Next.js + KendoReact components for speed, accessibility, and consistent visuals.
Auth: Supabase anonymous sign‑ins so users can start immediately, then optionally convert to a permanent account later. See: Supabase Anonymous Sign‑Ins.
Data: Supabase Postgres with Row Level Security (RLS) to ensure each user (anonymous or permanent) only reads/writes their own data.
Storage: Private Supabase Storage bucket for receipt images. Users can only access their own files.

Data Model (Key Tables)

categories: name, color, optional budget
expenses: vendor, amount, date, status, category_id, AI extracted_data, user_edits
receipts: original file metadata, storage path, processing status, extracted payload
user_preferences: currency, date format, theme, notification settings

KendoReact Components Used

Card
Button
Grid
TextBox, NumericTextBox
DropDownList
DatePicker
ProgressBar
Badge
Notification
Dialog
Switch

Implementation Notes

Anonymous sign‑in is triggered automatically in the navigation on first visit; status indicators show “Anonymous” until the user upgrades to a permanent account.
UI is responsive, keyboard‑friendly, and uses accessible components.
All features are wired for real data with Supabase services; OCR is stubbed for demo with realistic object shapes and confidence scores.
Recommended to use dynamic rendering for user‑specific content to avoid caching cross‑user metadata as noted in Supabase docs: Supabase Anonymous Sign‑Ins.

Why KendoReact?

Ship quickly with polished, accessible building blocks that feel consistent across pages.
Production‑ready grid, inputs, dialogs, and feedback components reduce custom code.
Strong theming and UX conventions keep the app cohesive as it grows.

Why Supabase (Anonymous‑first)?

Removes sign‑up friction—users try the product immediately.
Clear path for account conversion without losing data.
Secure by default with RLS and JWT claims that distinguish anonymous vs permanent users.

Thanks for reading! If you want to try Ezpense or contribute, check out the demo and repo above.

DEV Community: Ahmad Nurfadilah