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

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.