Day 05: Form Submission

Overview

Day 5 focused on implementing a complete form submission system that processes assessment responses and sends them via email using the Resend API. The implementation includes comprehensive property-based testing, robust error handling, and proper data formatting.

Try it yourself: Assessment Form

Key Accomplishments

Core Implementation

  • API Endpoint: Created /api/submit endpoint that handles form submissions with Turnstile verification
  • Email Integration: Integrated Resend API for sending assessment results via email
  • Data Processing: Implemented utilities for URL encoding/decoding and email formatting
  • Results Routing: Added dynamic routing to results pages based on Q1 answer (assessment path)

Email System

  • Template Engine: Built comprehensive email template that organizes all questions and answers by section
  • HTML Formatting: Implemented proper HTML escaping with line break preservation for multi-line inputs
  • Dynamic Subject: Email subjects include the assessment path for easy categorization
  • Error Handling: Robust retry functionality and comprehensive error reporting

Testing & Quality Assurance

  • Property-Based Testing: Implemented 9 comprehensive property tests covering:
    • Form submission completeness (Property 6)
    • Email content completeness (Property 7)
    • Results page routing (Property 8)
    • URL encoding round-trip verification (Property 9)
    • Line break preservation in email content (Property 8)
  • Error Scenarios: Unit tests for various error handling scenarios
  • Integration Tests: Use Vitest to test the submission flow, no E2E tests yet.

Security & Reliability

  • Server-side Verification: Turnstile token verification on the backend
  • Input Sanitization: Proper HTML escaping while preserving formatting
  • Environment Configuration: Secure handling of API keys and email addresses
  • Comprehensive Error Handling: Graceful failure modes with user-friendly error messages

Code Quality Improvements

  • Utility Extraction: Refactored shared utilities (formatPathName, formatEmailBody)
  • Type Safety: Strong TypeScript typing throughout the submission pipeline
  • Code Organization: Clean separation of concerns between API, utilities, and components
  • Documentation: Comprehensive JSDoc documentation for all functions

Technical Details

The submission system processes assessment data through several stages:

  1. Client-side form validation and Turnstile verification
  2. Server-side Turnstile token verification
  3. Data formatting and email template generation
  4. Resend API integration for email delivery
  5. Dynamic routing to appropriate results page

The system handles various data types (strings, arrays, objects) and ensures all user input is properly formatted and escaped for email delivery while preserving readability.

Testing Strategy

The implementation uses property-based testing with fast-check to verify system behavior across a wide range of inputs, ensuring robustness and reliability. This approach caught several edge cases and led to improvements in data handling and formatting.

Status: ✅ Completed

The form submission system is fully functional with comprehensive testing coverage and robust error handling. All assessment responses are now properly processed and delivered via email.