A landing page application that collects company information and allows users to add additional details through email links.
Note: This project is being refactored to improve code organization and maintainability. See REFACTORING-PHASE1.md, REFACTORING-PHASE2.md, REFACTORING-PHASE3.md, REFACTORING-PHASE4.md, and REFACTORING-PHASE5.md for details on the current phases.
Important: We've fixed template rendering issues by simplifying the component system. See TEMPLATE-FIX.md for details.
- Simple landing page with DEV Partner Portal branding
- Form to collect company name and email
- SQLite database storage for submissions
- Email functionality to send users a unique link
- Continuation page for adding more information
- Image upload and storage using Uploadcare
This project uses Uploadcare for image uploads with a single file uploader configuration.
UPLOADCARE_MULTIPLEis set tofalsein the global configuration- The UI includes a single uploader with an "Add Another Image" button
- JavaScript handles individual file uploads
- Helper script (
/public/js/uploadcare-helper.js) provides utility functions
├── api/ # API route handlers
│ ├── images.ts # Image-related API endpoints
│ ├── submissions.ts # Submission-related API endpoints
│ └── index.ts # API routes configuration
├── controllers/ # Request handling logic
│ ├── imageController.ts # Image upload/retrieval logic
│ └── submissionController.ts # Submission handling logic
├── models/ # Data models and types
│ ├── image.ts # Image-related types
│ └── submission.ts # Submission-related types
├── services/ # Business logic
│ ├── imageService.ts # Image metadata operations
│ ├── uploadcareService.ts # Uploadcare integration
│ ├── databaseService.ts # Database operations
│ ├── emailService.ts # Email sending functionality
│ └── templateService.ts # HTML template rendering
├── utils/ # Utility functions
│ ├── helpers.ts # Helper functions
│ └── responseUtils.ts # Standardized API responses
├── views/ # HTML templates
│ ├── landing.html # Main landing page
│ └── continue.html # Continuation page
├── public/ # Static assets and client-side JS
│ ├── css/ # Stylesheets
│ │ └── styles.css # Common styles
│ └── js/ # Client-side JavaScript
│ ├── landing.js # Landing page script
│ ├── continue.js # Continuation page script
│ └── modules/ # Modular JavaScript components
│ ├── uploadcare-manager.js # Uploadcare functionality
│ ├── gallery-renderer.js # Image gallery UI
│ └── form-handler.js # Form submission logic
└── index.ts # Main entry point
The application uses a SQLite database with the following schemas:
CREATE TABLE IF NOT EXISTS laura_mepson_submissions_v1 (
id TEXT PRIMARY KEY,
company_name TEXT NOT NULL,
email TEXT NOT NULL,
created_at TEXT NOT NULL,
additional_fields TEXT
)
CREATE TABLE IF NOT EXISTS laura_mepson_images_v1 (
id TEXT PRIMARY KEY,
original_name TEXT NOT NULL,
content_type TEXT NOT NULL,
size INTEGER NOT NULL,
uploaded_at TEXT NOT NULL,
submission_id TEXT NOT NULL,
cdn_url TEXT NOT NULL
)
Note: Table names are kept for backward compatibility with existing data, but the application is now branded as DEV Partner Portal.
- User visits the landing page
- User submits company name and email
- Data is saved to SQLite database
- User receives an email with a unique link
- User can click the link to add more information
- Additional information is saved to the database
- User can upload and manage images related to their submission
- Main landing page:
https://[username].web.val.run - Continuation page:
https://[username].web.val.run?action=continue&id=[unique_id]
Images are stored using Uploadcare:
- Uploadcare handles file uploads, storage, and CDN delivery
- Uploadcare's built-in image preview and cropping tools are used
- Image metadata is stored in our SQLite database
- Users can upload, view, and delete images
- Images are associated with a specific submission
UPLOADCARE_SECRET_KEY: Secret key for Uploadcare API authentication
- When modifying the database schema, create a new table with a new version number
- Email templates are defined in
emailService.ts - The unique ID generation is handled in
utils/helpers.ts - Val Town HTTP vals use query parameters instead of path parameters for routing
The application uses a SQLite database with the following schema:
CREATE TABLE IF NOT EXISTS laura_mepson_submissions_v1 (
id TEXT PRIMARY KEY,
company_name TEXT NOT NULL,
email TEXT NOT NULL,
created_at TEXT NOT NULL,
additional_fields TEXT
)
Note: Table name is kept for backward compatibility with existing data, but the application is now branded as DEV Partner Portal.
- User visits the landing page
- User submits company name and email
- Data is saved to SQLite database
- User receives an email with a unique link
- User can click the link to add more information
- Additional information is saved to the database
- User can upload and manage images related to their submission
- Main landing page:
https://[username].web.val.run - Continuation page:
https://[username].web.val.run?action=continue&id=[unique_id]
Images are stored using Val Town's blob storage:
- Images are stored with a unique ID
- Metadata is stored alongside each image
- Users can upload, view, and delete images
- Images are associated with a specific submission
- When modifying the database schema, create a new table with a new version number
- Email templates are defined in
email.ts - The unique ID generation is handled in
utils.ts - Val Town HTTP vals use query parameters instead of path parameters for routing