Claimly

AI-Powered Insurance Claim Processing

Claimly is a modern web application that streamlines the insurance claims process using AI-powered damage detection. Built with React and Google Gemini AI, it helps users document, analyze, and submit insurance claims efficiently.

Features

🤖 AI-Powered Analysis

• Automated damage detection using Google Gemini 3
• Smart damage assessment with heatmap visualization
• Automatic estimation of repair costs and timelines
• Multi-image analysis with before/after comparisons

📸 Media Capture

• Drag-and-drop file upload
• Voice recorder for additional context
• Support for multiple image formats
• Real-time image preview

🛡️ Coverage Intelligence

• Policy type selection (Auto, Home, Renters, etc.)
• Automated coverage determination
• Detailed component-level analysis
• Deductible calculations

📄 Report Generation

• Professional PDF claim reports with jsPDF
• Embedded damage photos and analysis
• Comprehensive coverage breakdown
• Shareable via link or download

🌍 Multi-Language Support

• English (EN)
• Spanish (ES)
• Chinese (ZH)
• Real-time language switching

Tech Stack

Frontend

• React 19 - UI framework
• TypeScript - Type safety
• Vite 7 - Build tool
• Tailwind CSS 3 - Styling

AI & Services

• @google/genai - Google Gemini 3 integration
• jsPDF - PDF generation
• jsPDF-AutoTable - Table formatting

Icons & UI

• Lucide React - Icon library
• Custom design system (charcoal/amber palette)
• General Sans + Instrument Sans + JetBrains Mono fonts

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Google Gemini API key

Installation

1. Clone the repository

   git clone <repository-url>
   cd claimly

2. Install dependencies

   npm install

3. Configure environment

   Create a .env file in the root directory:

   GEMINI_API_KEY=your_gemini_api_key_here

4. Start development server

   npm run dev

   The app will be available at http://localhost:5173

Build for Production

npm run build

The optimized build will be in the dist/ directory.

Preview Production Build

npm run preview

Project Structure

claimly/
├── components/
│   ├── LandingPage.tsx       # Marketing homepage
│   ├── StepUpload.tsx         # File upload & voice recorder
│   ├── StepAnalysis.tsx       # AI damage analysis display
│   ├── StepCoverage.tsx       # Policy selector & coverage table
│   ├── StepForm.tsx           # Final review & PDF generation
│   ├── LanguageSwitcher.tsx   # Multi-language dropdown
│   ├── PrivacyPolicy.tsx      # Privacy policy page
│   └── TermsOfService.tsx     # Terms of service page
├── contexts/
│   └── LanguageContext.tsx    # i18n context provider
├── services/
│   └── geminiService.ts       # AI integration logic
├── utils/
│   └── translations.ts        # Translation strings
├── types.ts                   # TypeScript type definitions
├── App.tsx                    # Main application shell
├── index.tsx                  # Entry point
└── tailwind.config.js         # Tailwind configuration

Design System

Claimly features a refined luxury insurtech aesthetic:

Colors

• Carbon: Charcoal scale (50-900) for primary surfaces
• Amber: Gold accent color (400-700)
• Sage: Green secondary color

Typography

• Headings: General Sans (bold, tight tracking)
• Body: Instrument Sans (clean, readable)
• Numbers: JetBrains Mono (tabular figures)

Patterns

• Glass-morphism navigation header
• Subtle grain textures
• Dark accent cards (carbon-900)
• Amber accents on dark surfaces
• Smooth animations and transitions

Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

Code Quality

The project uses:

• TypeScript for type safety
• ESLint for code linting
• Consistent naming conventions (no abbreviations)

Workflow

Claimly guides users through a 4-step claim process:

1. 📸 Upload Photos - Upload damage photos, add voice notes, provide location
2. 🔍 AI Analysis - Review AI-detected damages with visual heatmaps
3. 🛡️ Coverage Check - Select policy type and verify coverage
4. 📄 Generate Report - Review details and download/share PDF claim

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari 14+

License

ISC

Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.

---

Built with AI-powered intelligence • Powered by Google Gemini 3