SendMyCV

SendMyCV is a modern, high-performance web application built with Next.js 14 and TypeScript. It serves as an advanced, AI-powered CV building workspace and recruiter distribution platform. Designed for modern job seekers, the platform offers an intuitive, real-time side-by-side editing interface, automated client-side PDF importing, and direct outreach capabilities to thousands of verified HR contacts.

---

🌟 Key Features & Capabilities

1. Interactive Real-Time CV Builder

• Side-by-Side Workspace: Features a split-pane layout with reactive forms on the left and a live-updating PDF preview panel on the right.
• Granular Section Management: Easily customize and manage essential resume components including:
  • Profile & Contact Information
  • Professional Work Experience
  • Academic Education History
  • Skills & Expertise Matrix
  • Project Portfolios
  • Certificates & Licenses
  • Language Proficiencies
  • Custom User-Defined Sections
• Reorder & Rearrange: Intuitive sidebar tools to dynamically add, remove, and reorder sections to highlight your best achievements.

2. Browser-Based PDF Parser (Smart Import)

• Zero-Server Data Processing: Drag-and-drop or browse an existing resume PDF.
• Intelligent Line & Section Segmentation: Employs client-side PDF analysis (via pdfjs-dist) to parse text layout, detect headings, and auto-populate the CV builder forms instantly.
• Privacy First: All file extraction is executed inside the user's browser, ensuring sensitive personal data never leaves the local machine.

3. High-Fidelity PDF Generation

• Client-Side Rendering: Generates standard-compliant, pixel-perfect documents on-the-fly using @react-pdf/renderer.
• Print-Ready Layouts: Fully formatted for standard A4 and US Letter document configurations.
• Aesthetics Customization: Tailor the CV appearance with options for custom typography, font sizing (pt), and accent color themes.

4. Recruiter Distribution Network

• Targeted Job Fields: Select specialized industries including Software Development, Data Science, Marketing, Sales, Human Resources, and more.
• Direct Outreach Builder: Configure email volume quotas (10, 25, 50, or 100 emails) and coordinate cover letters alongside resumes.
• Verified Database: Tap into a curated collection of 5,000+ HR and recruiter email contacts for instant job outreach.

5. Document Dashboard & Account Hub

• Unified File Manager: Central dashboard to create new documents, track cover letters, and manage existing resumes.
• Flexible Pricing Tiers: Built-in plan comparisons (Free, Basic, Pro Lite, and Elite) with interactive subscription options.
• Responsive Multi-Lingual Interface: Employs Next-Intl to deliver standard-compliant translation structures, complete with a clean UI layout.

---

🛠️ Architecture & Technology Stack

Front-End & Logic

• Framework: Next.js 14 (App Router)
• Programming Language: TypeScript
• State Management: Redux Toolkit (@reduxjs/toolkit and react-redux) for global form states and UI preferences.
• Forms & Validation: Formik coupled with Yup schemas for real-time validation.
• Toast Notifications: Sonner.

Document Engine & Styling

• PDF Rendering: @react-pdf/renderer for client-side compilation.
• PDF Parsing: pdfjs and pdfjs-dist for local document extraction.
• Styling: Styled-Components combined with custom flexbox layouts.

Middleware & Security

• Access Security: Custom middleware handling Content Security Policy (CSP) header values, secure nonce injection, and strict transport security headers (HSTS).
• Internationalization: next-intl integration to handle localized routes and messages.

---

📁 Repository Structure

• src/app/: Next.js app directory handles page routes, internationalization wrappers ([locale]), global layouts, error screens, and middleware.
• src/Library/: Reusable user interface layer.
  • _Pages/: Module components containing page-specific logic (e.g., CvSteps, Documents, Checkout, Pricing, ResumeDetails).
  • components/: Modular UI elements including layout blocks, custom inputs, dialog overlays, form fragments, and PDF renderer templates.
  • Grids/: Layout containers and structural helpers.
  • Utils/: JavaScript utilities and helper functions.
• src/_lib/: Business logic, Redux slices, custom hooks, and server actions.
  • parse-resume-from-pdf/: Extractor parsing algorithm.
  • redux/: Configured stores, hooks, and slices for resume metadata and theme settings.
  • actions.ts: Next.js Server Actions handling user auth operations.
• messages/: Translation dictionaries (JSON format) supporting English and Arabic translations.