https://www.indiehackers.com/product/resumey-pro
npm install npm run build
.htaccess
RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L]
Professional Resume & CV Builder Web App (LTR + RTL Support)
Project Overview
Create a modern, responsive, and feature-rich web application that allows users to build professional resumes and CVs using customizable templates. The platform should offer an intuitive drag-and-drop editor, multiple professionally designed templates, and the ability to export resumes as PDF. It must support both English and Arabic content (LTR & RTL), with a clean, distraction-free interface inspired by tools like Canva and Novoresume. Admins should be able to upload/manage new templates.
Technology Stack
Frontend: React 18+ with TypeScript
Styling: Tailwind CSS with light/dark theme toggle
UI Components: Shadcn/ui
Icons: Lucide React
Routing: React Router DOM
State Management: Zustand + React Context
PDF Generation: html2pdf.js / Puppeteer (backend)
Drag & Drop: react-beautiful-dnd / react-grid-layout
Animations: Framer Motion
Build Tool: Vite
i18n: react-i18next (for multi-language support)
Core Features & Pages
1. Landing Page
Hero section with call to action
Preview gallery of resume templates
"Build Now" button
Testimonials, FAQs, pricing
2. Resume Builder (المحرر)
Layout
Left panel: Sections manager (Personal Info, Education, Experience...)
Center: Live editable preview (canvas)
Right panel: Style settings (fonts, colors, spacing)
Toolbar: Undo/Redo, Preview, Export, Save
Editing Features
Drag-and-drop sections
Inline editing of content
Add/remove/reorder resume sections
Smart forms with validation
Multiple resume pages supported
Multi-column layouts
Auto-formatting (dates, bullet points, alignment)
Section visibility toggles
Supported Resume Sections
Personal Info (Name, Title, Contact, Photo)
Summary / Objective
Work Experience
Education
Skills (with rating sliders or badges)
Languages
Certifications
Projects
Achievements
References
Custom sections
Design Customization
Font choice (Google Fonts)
Color schemes (primary, accent, background)
Section spacing, padding
RTL / LTR toggle
Light / Dark mode
Upload profile picture
Export
Export to PDF (with correct print formatting)
Save online (user dashboard)
Resume version history
Export as Word (optional)
3. Template Gallery
Grid view of all templates
Filter by industry (IT, Business, Education...)
Tag-based search (Modern, Minimal, Creative...)
Preview in full screen
Apply to editor
4. User Dashboard
Manage saved resumes
Duplicate, rename, delete versions
Track resume edit history
See stats (downloads, views if public resume)
5. Admin Panel
Add/edit/delete templates
Upload template assets (HTML + CSS structure or JSON config)
Approve new user-submitted templates (optional)
Manage user accounts and analytics
Toggle features (beta AI tools, RTL, etc.)
AI-Powered Features (Optional Enhancements)
AI Resume Writer: Generate resume content based on job title + experience
Job Description Analyzer: Tailor CV to match a job post
Grammar & Style Checker
AI Career Summary Generator
Keyword Optimizer: Match ATS keywords from uploaded JD
Auto Layout Fixer: Suggest improved layout/design automatically
Design Requirements
Visual Theme
Minimalist & clean interface (Canva-style)
Typography: Inter, Tajawal (for Arabic)
Color Themes: Switchable (Light/Dark/Blue/Gray)
Layout: Full-screen editor
Icons: Modern, outline icons
RTL support (CSS direction toggle)
Animations
Section add/remove with smooth transitions
Tooltip animations
Export loader (animated progress)
Save success/fail toasts
UI Components Needed
Multi-step form w/ validation
Template grid with preview
Canvas editor with zoom/scroll
Drag-and-drop list of sections
Color pickers / font selectors
Modal for save/export/share
Toggle switches / checkboxes
Notification system (toast)
Tabbed settings panels
PDF export component
Technical Specifications
Resume Template Engine
Templates saved in JSON or JSX format
Rendered using reusable React components
Placeholders for content injection
Layout-driven structure (columns, rows)
Theming support per template (font, color, spacing)
Responsive Design
Works on desktop and tablets
Mobile version (view/edit basic info)
Fixed layout in PDF export regardless of screen size
Sample Data
Include sample resumes for:
Fresh Graduate
Senior Developer
Graphic Designer
Teacher
Business Manager
Arabic & English versions
SEO & Meta
Title: أنشئ سيرتك الذاتية مجانًا - أقوى موقع CV Builder احترافي
Description: اصنع سيرتك الذاتية في دقائق باستخدام قوالب جاهزة وقابلة للتعديل، وصدّرها كـ PDF باحترافية.
Keywords: سيرة ذاتية، CV Builder، Resume أونلاين، قوالب CV جاهزة، تعديل CV، CV بالذكاء الاصطناعي
Performance Requirements
Fast load time < 1.5s
Lightweight bundle (code splitting)
Optimized for large resumes
Debounced input updates
Lazy load fonts/templates
Caching resumes locally
Phases of Implementation
Phase 1: Setup
React + Vite + Zustand
Tailwind config with RTL & themes
Base layout for builder/editor
Phase 2: Resume Builder Engine
Section manager
Inline content editing
Canvas preview with export
Phase 3: Template System
Admin upload
Gallery with live preview
Theme/style overrides
Phase 4: User System
Auth (optional)
Save/load resume drafts
Dashboard with history
Phase 5: AI Tools
Resume Writer
JD Analyzer
Content suggestions
Phase 6: Polish & Deployment
RTL tweaks
PDF optimization
Full QA and responsiveness testing
SEO and PWA optimization