📌 Issue Type
✨ Feature Request | 🧑💻 Good First / Intermediate Issue
🚀 Description
The current resume builder uses a fixed section order (e.g., Personal Info → Experience → Education → Skills → Projects). Users cannot customize the layout based on job role or preference.
This feature proposes adding drag-and-drop functionality so users can reorder resume sections dynamically.
🎯 Goal
Enable users to personalize their resume structure by rearranging sections using drag-and-drop, with changes reflected in preview and exported PDF.
💡 Proposed Solution
Implement a draggable UI for resume sections:
Users can drag sections up/down in the builder
Real-time visual feedback during dragging
Updated order reflected immediately in preview
Persist layout after refresh (localStorage or backend)
🧱 Technical Approach
Use a drag-and-drop library:
Recommended: dnd-kit
Alternative: react-beautiful-dnd
Maintain section order in state:
const [sectionOrder, setSectionOrder] = useState([
"personalInfo",
"experience",
"education",
"projects",
"skills"
]);
Save order to:
localStorage (initial implementation)
Optional backend profile storage (enhancement)
🖥️ UI Requirements
Drag handle icon (☰ or ⋮⋮) on each section
Smooth animations while dragging
Drop placeholder indicator
Mobile-friendly support (optional up/down buttons fallback)
📱 Expected Behavior
User drags a section → position updates instantly
Preview updates in real time
Refreshing the page retains custom order
✅ Acceptance Criteria
Sections can be reordered via drag-and-drop
Order updates in live preview
Order persists after page reload
No UI breaking during drag operations
Works on desktop and mobile
⭐ Optional Enhancements
Reset to default layout button
Role-based templates (Fresher / Developer / Manager)
Save multiple custom layouts per user
“Auto-suggest best order” using AI
📈 Impact
Improves user customization
Enhances resume quality for different job roles
📌 Issue Type
✨ Feature Request | 🧑💻 Good First / Intermediate Issue
🚀 Description
The current resume builder uses a fixed section order (e.g., Personal Info → Experience → Education → Skills → Projects). Users cannot customize the layout based on job role or preference.
This feature proposes adding drag-and-drop functionality so users can reorder resume sections dynamically.
🎯 Goal
Enable users to personalize their resume structure by rearranging sections using drag-and-drop, with changes reflected in preview and exported PDF.
💡 Proposed Solution
Implement a draggable UI for resume sections:
Users can drag sections up/down in the builder
Real-time visual feedback during dragging
Updated order reflected immediately in preview
Persist layout after refresh (localStorage or backend)
🧱 Technical Approach
Use a drag-and-drop library:
Recommended: dnd-kit
Alternative: react-beautiful-dnd
Maintain section order in state:
const [sectionOrder, setSectionOrder] = useState([
"personalInfo",
"experience",
"education",
"projects",
"skills"
]);
Save order to:
localStorage (initial implementation)
Optional backend profile storage (enhancement)
🖥️ UI Requirements
Drag handle icon (☰ or ⋮⋮) on each section
Smooth animations while dragging
Drop placeholder indicator
Mobile-friendly support (optional up/down buttons fallback)
📱 Expected Behavior
User drags a section → position updates instantly
Preview updates in real time
Refreshing the page retains custom order
✅ Acceptance Criteria
Sections can be reordered via drag-and-drop
Order updates in live preview
Order persists after page reload
No UI breaking during drag operations
Works on desktop and mobile
⭐ Optional Enhancements
Reset to default layout button
Role-based templates (Fresher / Developer / Manager)
Save multiple custom layouts per user
“Auto-suggest best order” using AI
📈 Impact
Improves user customization
Enhances resume quality for different job roles