AutoExtract: Invoice Manager

Overview

Swipe Invoice is an AI-powered invoice processing application that automates data extraction from various file formats (Excel, PDF, images) using Google Gemini AI. The application organizes extracted data into structured sections for Invoices, Products, and Customers with real-time synchronization using Zustand state management.

Live Site: AutoExtract: Invoice Manager Website

Frontend and Backend Repo: AutoExtract: Invoice Manager

Demo Video

AutoExtract.ScJZd7GNz-0.mp4

Key Features

• AI-Powered Data Extraction: Utilizes Google Gemini AI for accurate data extraction from multiple file formats
• Real-time Synchronization: Uses Zustand for seamless state management across components
• Interactive Tables: Implements shadcn table components for data display and management
• Responsive Design: Built with Next.js 15 and Tailwind CSS for optimal user experience
• File Format Support: Handles Excel, PDF, and image file formats

Technologies Used

• Frontend: Next.js 15 App Router, React, TypeScript
• Styling: Tailwind CSS, shadcn UI components
• State Management: Zustand
• AI Integration: Google Gemini API
• Data Display: shadcn Table Components

Challenges and Learnings

The development process provided valuable insights into:

• AI Integration: Implementing Google Gemini API for accurate data extraction
• State Management: Using Zustand for efficient state synchronization
• Component Architecture: Building reusable components with shadcn
• Data Validation: Implementing robust validation for extracted data

Optimizations

1. Efficient Data Processing

   • Optimized AI extraction pipeline for faster processing
   • Implemented error handling and validation checks

2. UI/UX Improvements

   • Responsive design for all screen sizes
   • Interactive tables with sorting and filtering

3. State Management

   • Centralized state management with Zustand
   • Real-time updates across components

Getting Started

Prerequisites

• Node.js 18+
• Google Gemini API key

Installation

git clone [email protected]:RutamBhagat/swipe-assignment.git

cd swipe-assignment

cp .env.example .env
# Provide Gemini API key and desired model in the .env

npm install

npm run dev

Project Structure

The application is organized into three main sections:

1. Invoices Tab

   • Displays invoice details including serial number, customer info, and totals
   • Supports real-time updates and filtering

2. Products Tab

   • Shows product information with pricing and tax details
   • Enables sorting and filtering capabilities

3. Customers Tab

   • Manages customer information and purchase history
   • Provides comprehensive customer data view

Features Implementation

File Upload and Processing

• Handles multiple file formats (Excel, PDF, images)
• Implements AI-powered data extraction
• Validates and processes extracted data

Data Management

• Real-time state updates using Zustand
• Efficient data organization across tabs
• Robust error handling and validation

Technology Stack Details

• Next.js
• Tailwind CSS
• ShadCN
• Tanstack Table
• Zustand

Outcome

Swipe Invoice demonstrates effective implementation of AI-powered data processing combined with modern web technologies to create a robust invoice management solution.

Screenshots