TradePay Reminder System Requirements Document

1. Introduction

TradePay Reminder is a full-stack SaaS application designed to automate invoice reminders for trade businesses such as plumbers, electricians, HVAC technicians, carpenters, and roofers. The system aims to streamline the invoicing process, ensuring timely payments through automated reminders and real-time payment status updates.

2. System Overview

TradePay Reminder provides a mobile-first, clean interface optimized for tradespeople on job sites. It offers user authentication, a dashboard for managing invoices, automated reminder sequences, and real-time payment status synchronization. The system is designed to be intuitive and efficient, with a focus on SMS communication, which is preferred by tradespeople.

3. Functional Requirements as Story Points

• As a User, I should be able to sign up using email or Google OAuth for authentication.
• As a User, I should be able to view a dashboard showing outstanding invoices with their status (paid, pending, overdue).
• As a User, I should be able to upload invoices via CSV or connect to Stripe, Square, or PayPal APIs.
• As a User, I should receive automated SMS and email reminders for invoices (Day 1, Day 3, Day 7 after due date).
• As a User, I should be able to customize reminder templates with placeholders for {{customer_name}}, {{invoice_number}}, {{amount}}, and {{due_date}}.
• As a User, I should see real-time payment status updates and have reminders stop immediately when payment is received.
• As a User, I should have access to simple analytics showing total outstanding, collected this month, and average days to payment.
• As a User, I should be able to view a pricing page with three tiers: Free (10 invoices/mo), Pro $29/mo (100 invoices), Team $49/mo (unlimited).

4. User Personas

• Admin: Manages user accounts and oversees system operations.
• User: Trade business owner or employee responsible for managing invoices and reminders.
• Guest: Potential user exploring the platform's features before signing up.

5. Core User Flows

1. User Registration and Setup:

   • User signs up using email or Google OAuth.
   • User connects a payment processor or uploads a CSV of invoices.

2. Invoice Management:

   • System imports invoices and tracks due dates.
   • User views and manages invoices on the dashboard.

3. Automated Reminder Sequence:

   • System sends automated reminders via SMS and email based on the schedule.
   • User customizes reminder templates as needed.

4. Payment and Sync:

   • Customer pays the invoice.
   • System detects payment via webhook and stops all reminders.
   • User sees real-time updates on the dashboard.

6. Visuals Colors and Theme

• primary: #1E90FF (Dodger Blue)
• primary_light: #63B8FF (Light Sky Blue)
• secondary: #FFFFFF (White)
• accent: #FF4500 (Orange Red)
• highlight: #32CD32 (Lime Green)
• bg: #F0F8FF (Alice Blue)
• surface: #FFFFFF (White)
• text: #000000 (Black)
• text_muted: #696969 (Dim Gray)
• border: #D3D3D3 (Light Gray)

7. Signature Design Concept

Interactive Invoice Timeline: The landing page features an interactive timeline that visually represents the journey of an invoice from creation to payment. Users can drag and scroll through the timeline to see key stages such as "Invoice Created," "Reminder Sent," and "Payment Received." Each stage is animated with smooth transitions using motion/react, providing a clear, engaging narrative of the invoicing process. The timeline is complemented by dynamic icons and progress indicators that update in real-time as invoices are processed.

LANDING HERO MOTION BRIEF

The landing hero will showcase an animated sequence where an invoice is generated, reminders are sent, and payment is received. This sequence will loop every 10 seconds, illustrating the efficiency of the TradePay Reminder system. The animation will use motion/react for smooth transitions and will be responsive to user interactions, such as hovering over stages to reveal more details.

8. Interaction Model & Motion Direction

• Interaction Model: Animated

  • The landing page will feature moderate scroll-triggered reveals and hover transitions.
  • Interactive elements will have spring physics for a polished user experience.

• Internal Pages: Static

  • Focus on layout clarity with minimal motion for dashboards and settings.

9. Non-Functional Requirements

• The system must be mobile-first and optimized for performance on job sites.
• It should handle errors gracefully and provide clear loading states.
• The application must be scalable to accommodate growing user bases and data volumes.

10. Tech Stack

• Frontend: React + TypeScript
• Backend: Node.js/Express or Hono
• Database: PostgreSQL with Prisma ORM
• SMS Integration: Twilio
• Email Integration: SendGrid or Resend
• Payment Processing: Stripe Billing
• Deployment: Vercel or similar

11. Assumptions and Constraints

• The application will be developed and launched within a 2-week timeframe.
• Users prefer SMS communication over email for reminders.
• The system must integrate seamlessly with existing payment processors like Stripe, Square, and PayPal.

12. Glossary

• OAuth: Open standard for access delegation, commonly used for token-based authentication.
• Webhook: A method of augmenting or altering the behavior of a web page or web application with custom callbacks.
• CSV: Comma-Separated Values, a file format for tabular data.
• API: Application Programming Interface, a set of tools and protocols for building software applications.