Project Overview
I want to create a minimal web app where users submit their email, verify via magic link, add/validate a US mailing address, and pay a one-time $5 fee (via Stripe) to save it. Once saved, the address is locked (view-only), with an option to pay again to update it. The goal is a clean, secure, low-maintenance site.
Tech Preferences
- **Frontend**: Modern framework of your choice (React, Next.js, Vue, Svelte, etc.) – something clean and responsive.
- **Backend**: NoCodeBackend (https://nocodebackend.com/) to auto-generate the API + database + Swagger docs. If you strongly recommend an alternative (e.g., Supabase, Firebase, PocketBase, or a lightweight Node/Express setup), I'm open to discussing trade-offs.
- **Database**: Whatever pairs best with the backend choice (likely PostgreSQL or similar via NoCodeBackend).
- **Authentication**: Passwordless magic links only.
- **Payments**: Stripe Checkout or Payment Element.
- **Email delivery**: Use a reliable service (Resend, SendGrid, Postmark, etc.) for magic links.
- **Deployment**: Vercel, Netlify, Render, etc. – keep it simple.
**Core Features & Requirements**
1. **Landing Page**
- Single form: Email input only.
- Real-time validation: Basic format check + debounce.
- Server-side: Prevent SQL injection (prepared statements / ORM), reject obviously fake/invalid emails.
- Optional: Integrate third-party email validation service (you mentioned you have software for authentic email checks – we can hook that in via API).
2. **Passwordless Login (Magic Link)**
- On submit → generate secure, one-time token → send magic link via email.
- Link expires after **15 minutes** (industry standard for security + usability; 10–30 min range is common, but 15 strikes a good balance).
- Single-use only (invalidate after click).
- Handle expired/invalid links gracefully with user-friendly error + resend option.
3. **User Profile Section**
- Two simple views/pages:
- Profile (main view with data).
- Logout (simple button/link).
- Display: Email (read-only) + saved mailing address (greyed out / disabled inputs).
4. **Address Form & USPS Validation**
- Fields: Street address (incl. APT/SUITE), City, State, ZIP.
- APT/SUITE can be free-text (anything).
- Other fields: Must validate against official USPS address standardization API (Addresses 3.0 / Address Standardization endpoint via developers.usps.com).
- Show suggested/corrected USPS version to user.
- Require user to accept USPS-validated version before proceeding (no saving unvalidated addresses).
- Note: USPS API requires registration; it's free for shipping/mailing-related use. We can use a third-party wrapper (Smarty, Lob, etc.) if easier/more reliable.
5. **Payment Flow**
- Instead of "Save", show **"Pay $5"** button (background hex #174990, white text, prominent).
- On click:
- Validate form (client + server).
- Trigger Stripe payment.
- On success webhook/callback: Save validated address + email to DB.
- Show success message + refresh profile view.
6. **Update Address Flow**
- If profile is complete (address saved): Show data greyed out + **"Change my address"** button below.
- On click: Unlock fields, clear current values, show two buttons:
- **Pay $5** (same #174990) → runs full validation + payment flow (step 5).
- **Cancel** → reverts to saved data and locks fields again.
**Additional Notes**
- Security: HTTPS everywhere, secure token handling, rate limiting on email sends / login attempts, basic input sanitization.
- UI/UX: Clean, mobile-friendly, minimal design (no need for fancy animations). Use Tailwind or similar for speed.
- Edge cases: Handle payment failures, expired links, duplicate emails, USPS non-matches, etc.
- Scope: This is the full MVP – small tweaks are expected, but no major feature additions planned.
If this aligns with your expertise and availability, I'd love to hear:
- Your rough estimate (time & cost).
- Any questions/clarifications.
- Thoughts on NoCodeBackend vs. other backends.
- Your preferred stack for this kind of project.
Looking forward to your thoughts!
Upon successful completion, there is a Phase 2.
Thanks,
Edward
... Show more