created receipt scanner page

[Eshajha19]

✨ Add Smart Receipt Scanner Page for Automatic Expense Entry

📌 Description

This PR introduces a Smart Receipt Scanner Page to the ExpenseFlow project that allows users to upload receipt images and automatically extract expense details using OCR.

The feature helps users quickly log expenses without manual entry by scanning receipts and detecting important information.

---

🚀 Features Added

• 🧾 Receipt Image Upload

  • Users can upload receipt images from their device.

• 🔍 OCR-based Text Extraction

  • Implemented using Tesseract.js to read text from receipts.

• 💰 Automatic Expense Detection

  • Detects:

    • Amount
    • Date
    • Category (based on receipt keywords)

• 💾 Frontend Storage

  • Saves:

    • Receipt image
    • Extracted OCR text
    • Detected expense details

  • Stored in localStorage.

• 📂 Saved Expense List

  • Displays previously scanned receipts with details.

• 🧹 Delete Option

  • Users can remove saved receipts.

• 🌙 Dark / Light Mode Toggle

  • Theme switch implemented for better user experience.

• 📱 Responsive Design

  • Works on mobile, tablet, and desktop.

---

🎨 UI Improvements

• Animated glowing scan button
• Beautiful glassmorphism cards
• Smooth hover effects
• Modern responsive layout
• Styled popup notifications instead of alerts

---

📁 Files Added

• receipt.html
• receipt.css
• receipt.js

---

🧪 How to Test

1. Open the Receipt Scanner page.
2. Upload a receipt image.
3. Click Scan Receipt.
4. Verify extracted details (Amount, Date, Category).
5. Click Save Expense.
6. Check that the expense appears in Saved Expenses.
7. Refresh page → confirm data persists.

---

📷 Example Use Case

Upload a receipt → Scan → Auto detect details → Save → Track expenses instantly.

---

📊 Impact

This feature improves ExpenseFlow usability by enabling automatic expense entry, reducing manual work and making the budgeting process faster.

---

✅ Enhances the ExpenseFlow user experience
✅ Adds a practical real-world finance tool
This PR closes issue #999

Screen.Recording.2026-03-06.145337.mp4

[vercel]

@Eshajha19 is attempting to deploy a commit to the Renu's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

🎉 Thanks for the PR, @Eshajha19!

We really appreciate you taking the time to contribute to ExpenseFlow! 💙

---

⭐ Love this project?

Please give us a star! It helps the project grow and reach more developers! 🌟

🔗 https://github.com/Renu-code123/ExpenseFlow

---

✅ PR Checklist

Before we review, please ensure:

• Your code follows the project's coding standards
• All file changes are accurate and intentional
• You've tested your changes locally
• Any review comments have been addressed

---

🙌 Thank You for Contributing!

We truly appreciate your interest in contributing to this project.

• Please make sure your code follows the project structure
• Add clear commit messages and comments where necessary
• Ensure your changes do not break existing functionality

We'll review your PR as soon as possible. Keep up the great work! ✨

---

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
expenseflow	Ready	Preview, Comment	Mar 6, 2026 1:36pm