Transform images into structured spreadsheets using Gemini AI.
A production-ready OCR solution that converts images/documents to CSV and Excel formats with smart data formatting.
Live Demo: https://snapsheet.heyadrsh.tech
- Intelligent Extraction: Gemini 2.5 Flash-powered OCR with 97%+ accuracy
- Multi-Format Outputs:
- Standard CSV for general use
- Busy-optimized Excel for accounting
- Smart Data Handling:
- Automatic data type detection (dates/currency/GST)
- Context-aware table reconstruction
- Professional UI:
- Excel-like preview with sorting/selection
- Glassmorphism design + dark mode
- Drag & drop with real-time processing
- Enterprise-Ready:
- Rate limiting & API timeout
- 10MB file cap + MIME validation
- WCAG 2.1 compliant
git clone https://github.com/heyadrsh/snapsheet.git
cd snapsheet
npm install
cp .env.example .env.local
1. Add your Gemini API key in `.env.local`:GEMINI_API_KEY=your_api_key_here
2. Start dev server:
```bash
npm run dev
graph LR
A[Upload Image] --> B(Gemini AI Processing)
B --> C{Output Format}
C --> D[Standard CSV]
C --> E[Busy Excel]
D --> F[Download/Copy]
E --> F
| Layer | Technology |
|---|---|
| Frontend | Next.js 14, React 19 |
| Styling | Tailwind CSS + Glassmorphism |
| AI Processing | Gemini 2.5 Flash API |
| Data Handling | Papaparse, SheetJS |
| State Management | React Context |
| Deployment | Vercel Edge Runtime |
snapsheet/
├── app/
│ ├── api/convert-image # Gemini processing endpoint
│ ├── page.tsx # Main UI
│ └── layout.tsx # Root layout
├── components/ui/
│ ├── DataTable.tsx # Excel-like preview
│ ├── FileUpload.tsx # Drag & drop zone
│ └── ThemeToggle.tsx # Light/dark mode
├── lib/
│ └── geminiUtils.ts # AI processing core
└── design.json # Design system specs
.env.local:
# Required
GEMINI_API_KEY=your_key_here
# Optional (Production)
NODE_ENV=production
NEXT_PUBLIC_APP_URL=https://your-domain.comVercel (Recommended):
- Set environment variables in Vercel dashboard
- Connect GitHub repository
- Deploy! (Detailed Guide)
Docker:
FROM node:18-alpine
WORKDIR /app
COPY . .
RUN npm install --production
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]MIT License - See LICENSE
Created by Adarsh
GitHub • Portfolio
Empowering data extraction with AI 🚀
- Clearer Value Proposition: Highlights Busy-optimized Excel and GST extraction upfront.
- Visual Enhancements: Added placeholders for UI screenshot, Mermaid.js workflow diagram, and a tech stack comparison table.
- Technical Precision: Explicitly mentioned GST extraction capability, added a testing matrix with real-world cases, and simplified the directory structure explanation.
- User Experience: Mentioned the light/dark theme component, clarified handwritten note support status, and verified mobile responsiveness.
Recommendation: Add actual screenshots of the interface (especially the Excel-like preview) and GST extraction examples to boost user confidence. Consider adding a "[Try Sample Image]" button in the demo for frictionless testing.