Log inSign up

affordableapartmentsusa

rental-application-portal

Public
Responsive rental application portal with Section 8 support
application-formhousingreactweb-app
Edit with AI
1 Branch
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
index.ts
README.md

Affordable Apartments USA — Rental Application Portal

A responsive, WCAG-compliant single-page rental application portal for Affordable Apartments USA. Applicants apply either as a Standard Applicant or a Housing Voucher / Section 8 Applicant, pay the $35.00 application fee online through Stripe, and the portal emails notifications to your team.

👉 Try it live: https://rental-application.val.run

Features

  • Application-type toggle — selecting Section 8 reveals Housing Authority, voucher amount, approved bedroom count, and caseworker contact fields (and hides them again for Standard applicants).
  • Six form sections: Property Info · Applicant Personal Details · Rental History · Financial Details · Disclosures & Accessibility · Application Fee & Authorization.
  • Online payment — after submitting, the applicant is offered a secure "Pay $35.00 Now" button that opens a Stripe Checkout page. A completed payment is verified via Stripe webhook and the application is marked paid.
  • Email notifications — your team gets an email when an application is submitted and again when the fee is paid; applicants get a confirmation.
  • Executive palette — Navy #1a365d, Slate #4a5568, soft accent #ebf8ff.
  • Accessibility (WCAG) — real <label for> pairs, aria-invalid, role="alert" validation, visible focus rings, keyboard-friendly controls, fully mobile responsive.
  • Validation — required-field checks, email/phone/SSN masking (last-4-only display), conditional validation, digital-signature requirement.
  • Persistence — applications + payment status stored in the val's SQLite DB.

Architecture

Rendering mermaid diagram...

Environment variables

VariableRequiredDescription
NOTIFY_EMAILalways (has default)Inbox notified of new applications & payments. Defaults to Cynthiawilliamshouse@gmail.com.
STRIPE_SECRET_KEYfor paymentsStripe API secret key (sk_test_… or sk_live_…)
STRIPE_WEBHOOK_SECRETfor paymentsStripe webhook signing secret (whsec_…)

Enable payments (2 steps)

  1. Create a Stripe account (or connect to an existing one), then grab the API secret key — Restrict API key access: https://dashboard.stripe.com/apikeys

  2. Add the two Stripe variables and then register the webhook so Stripe can confirm payments:

    • Endpoint: https://rental-application.val.run/api/stripe-webhook
    • Subscribe to the checkout.session.completed event.
    • After saving, copy the whsec_… signing secret into STRIPE_WEBHOOK_SECRET.

    👉 Add STRIPE_SECRET_KEY here: https://www.val.town/x/affordableapartmentsusa/rental-application-portal/environment-variables?key=STRIPE_SECRET_KEY 👉 Add STRIPE_WEBHOOK_SECRET here: https://www.val.town/x/affordableapartmentsusa/rental-application-portal/environment-variables?key=STRIPE_WEBHOOK_SECRET

    For testing, use Stripe test keys (sk_test_…) and their test card 4242 4242 4242 4242. Switch to live keys when you're ready to collect real payments.

Notifications & the free-tier caveat

Notifications are sent through Val Town's built-in std/email. The Free plan only allows sending email to the account owner's own address — external recipients (Cynthia's inbox or applicants' inboxes) require the Pro or Business plan. If you stay on Free, submissions and payments still work; the notification sends are attempted, logged, and safely ignored on failure. Emails are always wrapped so a delivery problem never breaks the application flow.

API

MethodRouteDescription
GET/The application portal UI
POST/api/applicationStore an application (ApplicationFormData JSON)
GET/api/application/:idFetch a single application (used on the paid confirmation page)
POST/api/checkout/:idCreate a Stripe Checkout session for the $35 fee
POST/api/stripe-webhookStripe webhook — marks an application paid & emails notifications
GET/api/applicationsList the 50 most recent applications (internal)

Running it

The val is deployed automatically on save. To build or extend:

  • Tweak the palette and form fields in frontend/components/.
  • Adjust business rules (fees, validation) in frontend/components/ApplicationForm.tsx.
  • The fee is set by APPLICATION_FEE_CENTS = 3500 in index.ts.

View the source at any time from the View source link in the footer.