RecipArt

Inspiration

I was inspired by a random post on pinterest - an artwork done over and despite the purchase on a reciept. That image showed me that art doesn't need a canvas—paper in your pocket is enough. Art can done be wherever, whenever and on whatever. RecipArt is the digital expression of that idea: make drawing accessible, spontaneous, and social.

What it does

It allows and encourages users to draw art randomly during commute or mundane activities to draw on any paper on hand which usually tends to be reciepts, and cash.

• Users draw on the receipt or behind it.
• Upload a receipt photo (or take one), and save the artwork.
• Uses OCR to detect receipt text and selectively blur private details and highlight prices.
• Community features: commenting, guessing games, and a leaderboard for top price guess submissions.

How I built it

RecipArt is a single-page React app written in TypeScript and bundled with Vite. Core design choices:

• Component-driven UI (uploader, editor, art view, comments, leaderboard).
• Services layer: ocrService for text extraction, receiptService for backend receipt handling, and geminiService for optional AI-powered suggestions.
• Firebase for authentication, Firestore storage, and image hosting.
• The architecture keeps image handling client-side where possible and uses cloud services for persistence and social features.

Challenges we ran into

• OCR reliability across varying receipt lighting/angles; required preprocessing and fallback handling.
• Handling privacy: giving users simple, visible controls for blurring sensitive receipt details.

Accomplishments I'm proud of

• Seamless OCR integration that extracts items and allows item-level editing.
• Social features (comments, guessing, leaderboard) that encourage playful interaction.

What's next for RecipArt

• Improve OCR robustness and add offline-first editing.
• Add sharing hooks (social links, export presets).
• Mobile-first polishing and a one-tap upload+draw flow.

Built With

• ocr
• react
• typescript
• vite