IncentiveBox: Your personal savings wallet

This is a submission for the Postmark Challenge: Inbox Innovators.

What I Built

IncentiveBox is a comprehensive coupon management platform that transforms email-based promotions into an organized, searchable digital wallet. The application automatically parses promotional emails, extracts structured coupon data using AI, and presents it in a clean, user-friendly interface.

In today's digital economy, consumers are bombarded with promotional emails that often get lost in crowded inboxes. IncentiveBox solves this problem by creating a centralized hub for all promotional offers, ensuring users never miss out on savings opportunities. The platform intelligently categorizes coupons, tracks expiration dates, and provides real-time updates when new offers arrive.

Key features include:

• Email-based coupon extraction and parsing
• AI-powered data structuring using Claude 3 via OpenRouter
• Real-time updates with Supabase Realtime
• Searchable coupon database with filtering by brand and category
• Expiration tracking with visual indicators
• User favorites system
• Mobile-responsive design

Demo

[incentivebox.vercel.app](https://incentivebox.vercel.app)

Test Credentials:

Email: [e-mail] (Be sure to enter a valid email since you will be requested to verify your account)
Password: demo1234

Testing Instructions:

1. Log in using your credentials
2. Browse through existing coupons by category or brand
3. Search for specific deals using the search bar
4. Save coupons to your favorites
5. Use the Help button on the UI for instructions on forwarding promotional emails.

Code

sharkfin31 / incentivebox

IncentiveBox

A coupon management application with email integration.

Project Structure

incentivebox/
├── frontend/             # Frontend React application
│   ├── components/       # React components
│   ├── context/          # React context providers
│   ├── hooks/            # Custom React hooks
│   ├── pages/            # Page components
│   ├── services/         # API services
│   └── utils/            # Utility functions
├── backend/              # Backend Express server
│   ├── index.js          # Main server file
│   └── test-email.js     # Test script for email endpoint
└── public/               # Static assets

Frontend (React)

The frontend is built with React and uses Supabase for authentication and data storage.

Setup

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

Features

• User authentication (sign up, login, logout)
• Coupon browsing and filtering
• Favorites management
• Email-to-coupon integration

Backend (Express)

The backend server handles inbound emails from Postmark and processes them into coupons.

Setup

1. Start the server:

npm run server

2. For development with…

View on GitHub

How I Built It

Architecture & Tech Stack

IncentiveBox follows a modern web application architecture with separate frontend and backend components:

Frontend:

• React with TypeScript for type safety and better developer experience
• Vite for fast development and optimized builds
• Custom UI components with inline styling for flexibility
• React Router for navigation
• Context API for state management
• Real-time data synchronization with Supabase Realtime

Backend:

• Node.js with Express for the API server
• AI-powered email parsing using Claude 3 via OpenRouter
• Supabase for database, authentication, and real-time updates
• Postmark for email processing

Deployment:

• Vercel for both frontend and backend hosting
• Environment variables for secure configuration

Implementation Process

Email Processing Pipeline

The core of IncentiveBox is its email processing pipeline. When a promotional email arrives via Postmark's inbound webhook, our backend:

• Receives the email content from Postmark
• Extracts the sender, subject, and body
• Passes this data to our AI parser (Claude 3 via OpenRouter)
• Structures the extracted data (brand, savings amount, expiration date, etc.)
• Stores the structured coupon in Supabase
• Notifies connected clients via Supabase Realtime

This approach allows for seamless conversion of unstructured email content into structured, searchable data.

AI-Powered Parsing

I chose Claude 3 (via OpenRouter) for its exceptional ability to extract structured data from unstructured text. The AI model is prompted to identify key coupon attributes like:

• Brand name
• Savings amount
• Description
• Expiration date
• Promo code
• Category
• Deal link

For reliability, I implemented a fallback regex-based parser that activates if the AI parsing fails.

Real-Time Updates

Using Supabase Realtime, I implemented a subscription system that updates the UI instantly when:

• New coupons are added via email
• Users save coupons to favorites
• Expired coupons are deleted

This creates a dynamic, responsive experience without requiring page refreshes.

User Experience Considerations

I made several key UX decisions:

• Expired coupons are visually distinct with a light red background
• Search functionality is accessible from the header
• Authentication is required to view coupons, ensuring data privacy
• Responsive design works across desktop and mobile devices
• Clean login/registration flow without distracting elements

Experience with Postmark

Postmark's inbound email processing was instrumental in creating IncentiveBox. The webhook integration was straightforward to implement, and the reliable delivery of parsed email content made it possible to build our email processing pipeline.

Key benefits of using Postmark included:

• Clean, consistent email parsing
• Reliable webhook delivery
• Detailed metadata that helped with sender identification
• Excellent documentation that made integration simple

The combination of Postmark for email processing, Claude 3 for AI parsing, and Supabase for data storage created a powerful, modern stack that enabled us to build a sophisticated email-to-coupon conversion system with minimal complexity.