RECEIPTO

Project description

A web application designed to manage and organize expenses from receipts. Users can upload receipt images, automatically extract expense details using OCR, and visualize their spending through a line chart over different time ranges. The app helps users view statistics of their spendings, and maintain a digital record of receipts, eliminating the need for manual entry and paper storage.

Personal Goals

• Explore the new full-stack development mental model in Next.js 15 using Server Components and modern React features
• Work with PostgreSQL using Drizzle ORM for data modeling and queries
• Implement accessibility best practices by adhering to WCAG guidelines

Features

• Upload receipts (PDF, JPEG, PNG) with automatic data extraction via LlamaExtract
• Fully responsive and WCAG-compliant UI
• Interactive charts with time-based expense filters
• View and delete uploaded receipts
• Expense filtering
• Dark mode support
• Email and Password authentication

Technologies Used

• Framework & Language
  • Next.js 15
  • React 19
  • TypeScript
• Styling & UI
  • Tailwind CSS 4
  • shadcn/ui
  • Framer Motion
• Forms & Validation
  • React Hook Form
  • Zod
• Database & ORM
  • PostgreSQL
  • Supabase
  • Drizzle ORM
• Data Visualization
  • Recharts