Case 102024Full Stack Developer & AI Engineer

Card Info Analyser

AI-powered card information extraction

Turns a photo of a card into structured fields. Built on Google Gemini, with camera capture or file upload, single cards or front/back pairs, and JSON or clipboard export.

React 18ViteTailwind CSSFastAPIPythonGoogle Gemini AI+3

1 / 2

Supports multiple card types

Real-time camera capture

Structured JSON export

SnapshotAt a glance

Full Stack Developer & AI Engineer

1 month

Outcomes

Supports multiple card types

Real-time camera capture

Structured JSON export

Technologies Used

9 Technologies Integrated

React 18

Vite

Tailwind CSS

FastAPI

Python

Google Gemini AI

Pillow

Axios

Lucide React

Manual entry removed

Impact

Key Features

Feature Implementation

8 Features

90%

Feature CoverageProject Scope

Project Vision

Transform card image processing into intelligent, automated information extraction.

Core Process

The process of Developing it.

Built React frontend with Vite, FastAPI backend with Gemini AI integration, implemented camera capture and file upload features.

Build notesWhat I built

Developed a modern web application using React 18 with Vite and Tailwind CSS, creating a responsive interface with dark/light theme support that works on both desktop and mobile devices, enabling users to extract information from card images through camera capture or file upload.
Built a FastAPI backend service integrated with Google Gemini AI API for intelligent information extraction from card images, supporting various card types including ID cards, business cards, credit/debit cards, driver's licenses, and membership cards, with structured JSON output for organized data display.
Implemented dual-mode functionality allowing users to analyze single cards or front/back card pairs, with export options including clipboard copy and JSON download, creating a complete solution that transforms manual card data entry into automated, AI-powered extraction.

Inspiration

The need to automate manual card information extraction and make it accessible through modern web technology.

Features

Camera capture for real-time card scanning
File upload support for card images
AI-powered information extraction using Google Gemini
Dark/light theme interface
Mobile-friendly responsive design
Dual mode: single card or front/back pairs
Structured results display
Export to clipboard or JSON download

Challenges

Camera permission handling
Image processing optimization
AI response formatting

Solution

Implemented proper browser API handling, optimized image processing with Pillow, and structured AI responses for consistent output.