Back to projects
Expenser

Expenser

Matan Shaviro / March 28, 2024

An advanced financial tracking platform developed using Next.js 15 and TypeScript, delivering smart receipt processing and monetary analytics while prioritizing intuitive design and robust security measures.

Slide 1

Planner Screen

Slide 2

Dashboard Screen

Slide 3

Filter Expenses

Slide 4

Catevory View

Core Features

  • AI-Powered Analysis: Leveraging Google's Generative AI for smart receipt analysis and categorization
  • Smart Organization: Intelligent expense categorization and management
  • Real-time Processing: Instant receipt scanning and data extraction
  • Secure Authentication: Robust user authentication with Clerk
  • Responsive Design: Modern UI with Shadcn UI and Tailwind CSS
  • Type Safety: End-to-end type safety with TypeScript and Prisma
  • Real-time Updates: WebSocket integration for live data synchronization
View on GitHub

1. Data Flow

User Action → Server Action → Database → Real-time Update → UI Update

2. Performance Considerations

  • Server Components: Maximizing React Server Components for better performance
  • Image Optimization: Next.js Image optimization
  • Code Splitting: Route-based code splitting
  • Real-time Updates: WebSocket for live data synchronization

Frontend

  • Next.js 15: Modern React framework with App Router
  • Shadcn UI: Beautiful, accessible components
  • Tailwind CSS: Utility-first styling
  • Framer Motion: Smooth animations and transitions
  • React Hook Form: Form handling with validation
  • Zod: Runtime type validation
  • Recharts: Interactive data visualization

Backend & Storage

  • Prisma: Type-safe database operations
  • Neon Database: Serverless PostgreSQL database
  • Clerk: Authentication and user management
  • Google AI: Generative AI for receipt analysis