This is a sample job application form web app built with Vite, React, Material UI, and TypeScript. It demonstrates the structure and fields used by the JobSpeed extension.

Features

Material UI components for a polished, professional look
Form validation matching the extension's ResumeData interface
Required and optional fields as defined in the extension
Incremental JSON file export with timestamps
Sections for:
- Personal Information (required)
- Work Experience (required)
- Education (optional)
- Certifications (optional)
- Skills (required)
- Professional Summary (optional)

Getting Started

Install Dependencies

pnpm install

Development Server

pnpm dev

The app will be available at http://localhost:5173

Build for Production

pnpm build

Preview Production Build

pnpm preview

Usage

Fill in the form with your information
Required fields are marked with an asterisk (*)
Click "Submit Application" to download your data as a JSON file
The file will be saved as job-application-{N}-{timestamp}.json
- {N} is an incrementing number
- {timestamp} is the current date and time

Field Requirements

The form matches the extension's ResumeData interface:

Required Fields

All personal information fields (except LinkedIn, GitHub, Website)
At least one work experience entry
At least one skill

Optional Fields

LinkedIn profile URL
GitHub profile URL
Personal website URL
Education entries
Certification entries
Professional summary

Testing

This project includes comprehensive test coverage with both unit tests and end-to-end tests.

Unit Tests (Vitest)

Run unit tests for React components:

# Run tests in watch mode
pnpm test

# Run tests once
pnpm test -- --run

# Run tests with UI
pnpm test:ui

# Run tests with coverage
pnpm test:coverage

Unit tests cover:

PersonalInfoForm component
WorkExperienceForm component
SkillsForm component
App component integration

End-to-End Tests (Playwright)

Run E2E tests that simulate real user interactions:

# Run E2E tests
pnpm test:e2e

# Run E2E tests with UI
pnpm test:e2e:ui

# View test report
pnpm test:e2e:report

E2E tests cover:

Complete form submission flow
Form validation (email, phone, zip code, GPA)
Adding and removing dynamic entries (work experience, education, etc.)
Skills management
File download functionality

Integration with Main Project

This demo app is:

Excluded from the main extension build
Bootstrapped separately with its own package.json
Included in the project's ESLint and Prettier configurations
Using the same strict TypeScript settings as the main project