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

Project Architecture

Directory Structure

expenser/
├── src/
│   ├── app/                    # Next.js 15 App Router
│   │   ├── (auth)/            # Authentication routes
│   │   ├── (dashboard)/       # Protected dashboard routes
│   │   └── layout.tsx         # Root layout
│   ├── components/            # Reusable components
│   │   ├── expenses/         # Expense-related components
│   │   ├── ui/              # Shadcn UI components
│   │   └── layout/          # Layout components
│   ├── hooks/               # Custom React hooks
│   ├── lib/                 # Utility functions and services
│   │   ├── ai/             # AI integration services
│   │   ├── db/             # Database operations
│   │   └── utils/          # Helper functions
│   ├── types/              # TypeScript type definitions
│   └── contexts/           # React contexts
├── prisma/                 # Database schema and migrations
└── public/                # Static assets

Key Architectural Decisions

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