The latest articles on DEV Community by Shyam Sundar (@shyamsravikumar). https://dev.to/shyamsravikumar https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3118337%2Ffc4544cb-f8ca-4d15-9778-ec4fdd0dca3e.jpg https://dev.to/shyamsravikumar en Shyam Sundar Sun, 08 Jun 2025 20:20:55 +0000 https://dev.to/shyamsravikumar/incentivebox-your-personal-savings-wallet-plb https://dev.to/shyamsravikumar/incentivebox-your-personal-savings-wallet-plb <p>This is a submission for the <a href="https://dev.to/challenges/postmark">Postmark Challenge: Inbox Innovators</a>.<br> <br></p> <h2> What I Built </h2> <p>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.</p> <p>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.</p> <p>Key features include:</p> <ul> <li>Email-based coupon extraction and parsing</li> <li>AI-powered data structuring using Claude 3 via OpenRouter</li> <li>Real-time updates with Supabase Realtime</li> <li>Searchable coupon database with filtering by brand and category</li> <li>Expiration tracking with visual indicators</li> <li>User favorites system</li> <li>Mobile-responsive design</li> </ul> <h2> Demo </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>[incentivebox.vercel.app](https://incentivebox.vercel.app) </code></pre> </div> <p> <iframe src="https://www.youtube.com/embed/Wo0PpHdLOXU"> </iframe> </p> <h3> Test Credentials: </h3> <p>Email: <a href="mailto:valid-email@some-mail.com">valid-email@some-mail.com</a> (Be sure to enter a valid email since you will be requested to verify your account)<br> Password: demo1234<br> <br></p> <h3> Testing Instructions: </h3> <ol> <li>Log in using your credentials</li> <li>Browse through existing coupons by category or brand</li> <li>Search for specific deals using the search bar</li> <li>Save coupons to your favorites</li> <li>Use the Help button on the UI for instructions on forwarding promotional emails. </li> </ol> <h2> Code </h2> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/sharkfin31" rel="noopener noreferrer"> sharkfin31 </a> / <a href="https://github.com/sharkfin31/incentivebox" rel="noopener noreferrer"> incentivebox </a> </h2> <h3> </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <div class="markdown-heading"> <h1 class="heading-element">IncentiveBox</h1> </div> <p>A coupon management application with email integration.</p> <div class="markdown-heading"> <h2 class="heading-element">Project Structure</h2> </div> <div class="snippet-clipboard-content notranslate position-relative overflow-auto"><pre class="notranslate"><code>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 </code></pre></div> <div class="markdown-heading"> <h2 class="heading-element">Frontend (React)</h2> </div> <p>The frontend is built with React and uses Supabase for authentication and data storage.</p> <div class="markdown-heading"> <h3 class="heading-element">Setup</h3> </div> <ol> <li>Install dependencies:</li> </ol> <div class="snippet-clipboard-content notranslate position-relative overflow-auto"><pre class="notranslate"><code>npm install </code></pre></div> <ol start="2"> <li>Start the development server:</li> </ol> <div class="snippet-clipboard-content notranslate position-relative overflow-auto"><pre class="notranslate"><code>npm run dev </code></pre></div> <div class="markdown-heading"> <h3 class="heading-element">Features</h3> </div> <ul> <li>User authentication (sign up, login, logout)</li> <li>Coupon browsing and filtering</li> <li>Favorites management</li> <li>Email-to-coupon integration</li> </ul> <div class="markdown-heading"> <h2 class="heading-element">Backend (Express)</h2> </div> <p>The backend server handles inbound emails from Postmark and processes them into coupons.</p> <div class="markdown-heading"> <h3 class="heading-element">Setup</h3> </div> <ol> <li>Start the server:</li> </ol> <div class="snippet-clipboard-content notranslate position-relative overflow-auto"><pre class="notranslate"><code>npm run server </code></pre></div> <ol start="2"> <li>For development with…</li> </ol> </div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/sharkfin31/incentivebox" rel="noopener noreferrer">View on GitHub</a></div> </div> <h2> How I Built It </h2> <h3> Architecture &amp; Tech Stack </h3> <p>IncentiveBox follows a modern web application architecture with separate frontend and backend components:</p> <h3> Frontend: </h3> <ul> <li>React with TypeScript for type safety and better developer experience</li> <li>Vite for fast development and optimized builds</li> <li>Custom UI components with inline styling for flexibility</li> <li>React Router for navigation</li> <li>Context API for state management</li> <li>Real-time data synchronization with Supabase Realtime</li> </ul> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faqgv1viensh01f5tzr6y.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faqgv1viensh01f5tzr6y.png" alt="Login"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fevjc0su8aass5dca0skq.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fevjc0su8aass5dca0skq.png" alt="Dashboard"></a></p> <h3> Backend: </h3> <ul> <li>Node.js with Express for the API server</li> <li>AI-powered email parsing using Claude 3 via OpenRouter</li> <li>Supabase for database, authentication, and real-time updates</li> <li>Postmark for email processing</li> </ul> <h3> Deployment: </h3> <ul> <li>Vercel for both frontend and backend hosting</li> <li>Environment variables for secure configuration</li> </ul> <h2> Implementation Process </h2> <h3> Email Processing Pipeline </h3> <p>The core of IncentiveBox is its email processing pipeline. When a promotional email arrives via Postmark's inbound webhook, our backend:</p> <ul> <li>Receives the email content from Postmark</li> <li>Extracts the sender, subject, and body</li> <li>Passes this data to our AI parser (Claude 3 via OpenRouter)</li> <li>Structures the extracted data (brand, savings amount, expiration date, etc.)</li> <li>Stores the structured coupon in Supabase</li> <li>Notifies connected clients via Supabase Realtime</li> </ul> <p>This approach allows for seamless conversion of unstructured email content into structured, searchable data.</p> <h3> AI-Powered Parsing </h3> <p>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:</p> <ul> <li>Brand name</li> <li>Savings amount</li> <li>Description</li> <li>Expiration date</li> <li>Promo code</li> <li>Category</li> <li>Deal link</li> </ul> <p>For reliability, I implemented a fallback regex-based parser that activates if the AI parsing fails.</p> <h3> Real-Time Updates </h3> <p>Using Supabase Realtime, I implemented a subscription system that updates the UI instantly when:</p> <ul> <li>New coupons are added via email</li> <li>Users save coupons to favorites</li> <li>Expired coupons are deleted</li> </ul> <p>This creates a dynamic, responsive experience without requiring page refreshes.</p> <h2> User Experience Considerations </h2> <p>I made several key UX decisions:</p> <ul> <li>Expired coupons are visually distinct with a light red background</li> <li>Search functionality is accessible from the header</li> <li>Authentication is required to view coupons, ensuring data privacy</li> <li>Responsive design works across desktop and mobile devices</li> <li>Clean login/registration flow without distracting elements</li> </ul> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp3uz5rflvdi3l4bnbup7.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp3uz5rflvdi3l4bnbup7.png" alt="Search"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F339ywn31j3vhcbmfanat.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F339ywn31j3vhcbmfanat.png" alt="Coupon Details"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnnzog9dpp5olwcx3r0et.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnnzog9dpp5olwcx3r0et.png" alt="Favorited coupons"></a></p> <h2> Experience with Postmark </h2> <p>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.</p> <p>Key benefits of using Postmark included:</p> <ul> <li>Clean, consistent email parsing</li> <li>Reliable webhook delivery</li> <li>Detailed metadata that helped with sender identification</li> <li>Excellent documentation that made integration simple</li> </ul> <p>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.</p> devchallenge postmarkchallenge webdev api