From a896e96ebf793b02cb801eaad76f05e0f5becd9d Mon Sep 17 00:00:00 2001 From: Jun-te Kim Date: Sun, 28 Dec 2025 16:59:41 +0000 Subject: [PATCH] page.tsx --- stripe_to_invoice/app/page.tsx | 228 ++++++++++++++++++++++++++++++--- 1 file changed, 211 insertions(+), 17 deletions(-) diff --git a/stripe_to_invoice/app/page.tsx b/stripe_to_invoice/app/page.tsx index 931e83d..d68bb80 100644 --- a/stripe_to_invoice/app/page.tsx +++ b/stripe_to_invoice/app/page.tsx @@ -1,57 +1,251 @@ // app/page.tsx +// This page doubles as: +// 1. A landing page +// 2. A product spec +// 3. A reminder to future-me what the hell I was building +// +// If you’re reading this months later: hi 👋 +// The product is the automation, not the UI. export default function Home() { return ( -
+
- {/* What this is */} + {/* -------------------------------------------------- + Intro + -------------------------------------------------- */}

Stripe → Xero automation

+

Automatically create and mark Xero invoices as paid when a Stripe payment succeeds. - +
Built for people who value time more than pressing buttons.

- {/* Steps */} + {/* -------------------------------------------------- + High-level flow (human readable) + -------------------------------------------------- */}
-

How it works

+

How it works (high level)

+
    -
  1. Log in ( Set up magic link, db has been set up)
    2. -
  2. Connect Stripe
    3. -
  3. Connect Xero
    4. -
  4. Make a payment
    5. -
  5. Invoice appears in Xero as paid
    6. +
  6. Log in via magic link (passwordless)
    7. +
  7. Connect your Stripe account
    8. +
  8. Connect your Xero organisation
    9. +
  9. A Stripe payment succeeds
    10. +
  10. An invoice appears in Xero as paid
- {/* Proof */} + {/* -------------------------------------------------- + Magic link auth – detailed flow + -------------------------------------------------- */}
-

Proof, not promises

+

Login flow (magic link)

+

- Your next Stripe payment will automatically reconcile in Xero. - No manual matching. No “awaiting payment”. + Authentication is passwordless. We only store intent and proof of login. +

+ + {/* Text-based flow diagram (easy to read + copy) */} + 
+{`Browser
+  |
+  | POST /auth/login (email)
+  v
+Backend
+  - find or create user
+  - generate token
+  - hash token
+  - store login_tokens row
+  - send email (SES)
+  |
+  v
+Email (magic link)
+  |
+  | GET /auth/callback?token=XYZ
+  v
+Backend
+  - hash token
+  - validate token (unused + not expired)
+  - mark token as used
+  - create session
+  |
+  v
+Set session cookie
+`}
+
+ + {/* Step-by-step breakdown */} +
    +
  1. + User enters their email address. +
    2. + +
  2. + Backend creates (or finds) a user record and stores a one-time login token + in login_tokens. +
    3. + +
  3. + An email is sent containing a short-lived magic link. +
    4. + +
  4. + When the link is clicked, the token is validated, marked as used, + and a session is created. +
    5. + +
  5. + A secure session cookie is set. No passwords. No OAuth popups. +
    6. +
+
+ + {/* -------------------------------------------------- + Stripe → Xero automation flow + -------------------------------------------------- */} +
+

Stripe → Xero automation flow

+ + 
+{`Stripe payment succeeds
+  |
+  | Webhook
+  v
+Backend
+  - verify Stripe event
+  - map payment to customer
+  - create Xero invoice
+  - mark invoice as paid
+  |
+  v
+Xero (reconciled automatically)
+`}
+
+ +

+ Once connected, everything runs automatically. + No manual reconciliation. No “awaiting payment” state.

- {/* Pricing */} + {/* -------------------------------------------------- + Proof + -------------------------------------------------- */} +
+

Proof, not promises

+ +

+ Your next Stripe payment will automatically reconcile in Xero. +
+ No manual matching. No bookkeeping busywork. +

+
+ + {/* -------------------------------------------------- + Pricing + -------------------------------------------------- */}

Pricing

+

£200 / month — unlimited invoices.

- {/* CTA */} + {/* -------------------------------------------------- + Footer / reminder + -------------------------------------------------- */}

- This page is a placeholder. The product is the automation. + This page is intentionally simple. +
+ The product is the automation, not the UI.

+ +
+

Implementation notes (for future me)

+ +

+ These are the only docs needed to implement magic-link auth with Next.js + AWS SES. +

+ + +
+
) }