Back to projects
Biller

Biller

Matan Shaviro / March 27, 2024

A sophisticated bill management application built with React Native and Expo, offering intelligent bill analysis and organization with a focus on user experience.

View on GitHub

Core Features

  • AI-Powered Analysis: Leveraging Google's Generative AI for smart bill analysis
  • Smart Organization: Intelligent categorization and management of bills
  • Real-time Processing: Instant bill scanning and data extraction
  • Secure Storage: Local data persistence with AsyncStorage
  • Responsive Design: Native-first approach with cross-platform support
  • Type Safety: End-to-end type safety with TypeScript
  • Gesture Support: Intuitive interactions with react-native-gesture-handler

Project Architecture

Directory Structure

biller/
├── app/                      # Expo Router app directory
│   ├── (tabs)/              # Tab-based navigation
│   ├── modals/              # Modal screens
│   └── _layout.tsx          # Root layout
├── components/              # Reusable components
│   ├── bills/              # Bill-related components
│   ├── common/             # Shared UI components
│   └── layout/             # Layout components
├── hooks/                  # Custom React hooks
├── lib/                    # Utility functions and services
│   ├── ai/                # AI integration services
│   ├── storage/           # Data persistence logic
│   └── utils/             # Helper functions
├── types/                 # TypeScript type definitions
├── constants/             # App-wide constants
└── assets/               # Static assets

Key Architectural Decisions

1. Data Flow

User Action → UI Component → Hook/Service → Storage/API → State Update → UI Update

2. Performance Considerations

  • Lazy Loading: Dynamic imports for route-based code splitting
  • Image Optimization: Efficient image handling with expo-image
  • Memoization: Strategic use of React.memo and useMemo
  • Gesture Optimization: Hardware-accelerated gestures

Frontend

  • React Native: Native mobile development with Expo
  • Expo Router: File-based routing for seamless navigation
  • Bottom Sheet: Smooth bottom sheet interactions with @gorhom/bottom-sheet
  • Reanimated: Performant animations and transitions
  • Blur Effects: Modern UI with expo-blur
  • Haptics: Tactile feedback for better user experience

Backend & Storage

  • AsyncStorage: Efficient local data persistence
  • File System: Robust file handling with expo-file-system
  • Image Processing: Advanced image manipulation with expo-image-manipulator
  • Camera Integration: Native camera access for bill scanning
  • Web Browser: In-app web browsing capabilities