portfolio/docs/sprint-artifacts/epic-2-retrospective.md

Epic 2 Retrospective - Resume Preview Page

Date: 2025-12-01
Epic: 2 - Resume Preview Page
Status: ✅ Complete (5/5 stories)
Facilitator: Bob (Scrum Master)
Participants: mahdi (Project Lead), Dev Team

---

Executive Summary

Epic 2 successfully delivered a complete, modular resume preview page with 100% story completion. The team adapted well to a mid-epic architecture change (two-column → single-column) and delivered high-quality, type-safe components ready for PDF generation in Epic 3.

---

Delivery Metrics

Stories Completed:

• ✅ 2-1: Create Resume Page Route
• ✅ 2-2: Create Resume Preview Container
• ✅ 2-3: Create Resume Header & Main Content Components
• ✅ 2-4: Create Resume Education & Additional Info Components
• ✅ 2-5: Create Download Button Component

Completion Rate: 5/5 stories (100%)

Functional Requirements Covered: FR5-9, FR15-25 (all covered)

Technical Outcomes:

• 8 new Vue components created
• 1 TypeScript interface updated
• Full responsive layout with print styles
• Zero TypeScript errors
• Ready for Epic 3 integration

---

What Went Well ✨

1. Modular Component Architecture

Impact: High maintainability and reusability

The team successfully decomposed the resume preview into focused, single-responsibility components:

• ResumeHeader.vue - Profile photo, name, contact
• ResumeSummary.vue - Professional summary
• ResumeExperience.vue - Work history with date formatting
• ResumeEducation.vue - Education history
• ResumeAdditionalInfo.vue - Skills, languages, certifications
• ResumeDownloadButton.vue - FAB with print mode detection

Why it worked: Clear separation of concerns made parallel development possible and testing easier.

2. Rapid Architecture Adaptation

Impact: Delivered better UX without major delays

Mid-epic, the team pivoted from two-column to single-column layout based on UX validation feedback. The modular design allowed this change without rewriting components.

Evidence: Stories 2-3 and 2-4 were revised to match new architecture, but implementation remained clean and on schedule.

3. Type Safety Throughout

Impact: Zero runtime type errors

All components leveraged TypeScript interfaces from Epic 1:

• ResumeBasics, WorkExperience, Education, Skill, Language, Certification
• Props properly typed
• Composable helpers (useResumeData()) provided type-safe data access

Why it worked: Epic 1's solid foundation paid dividends in Epic 2.

4. Print Mode Detection

Impact: Ready for Epic 3 PDF generation

The ?print=true query parameter and .no-print class were implemented early, ensuring seamless integration with Puppeteer in Epic 3.

Evidence: Download button correctly hides in print mode, page renders cleanly for PDF capture.

---

Challenges & Lessons Learned ⚠️

1. Mid-Epic Architecture Change

Challenge: Tech spec initially defined two-column layout, but UX validation revealed single-column was better for the design template.

Impact:

• Stories 2-2, 2-3, 2-4 required revision
• Component names became slightly misleading (e.g., "sidebar components" that aren't in a sidebar)

Root Cause: UX validation happened after tech spec creation.

Lesson Learned: Run UX validation BEFORE creating tech specs to avoid rework.

Action Item: Add UX validation step to workflow between architecture and tech spec creation.

2. Missing Interface Property

Challenge: The image property for profile photos wasn't in the original ResumeBasics interface.

Impact: Had to add it mid-implementation in Story 2-3.

Root Cause: Interface design didn't account for all design template requirements.

Lesson Learned: Review design templates thoroughly when creating interfaces.

Action Item: Add design template review checkpoint to interface creation workflow.

3. Inconsistent Story Context Usage

Challenge: Stories 2-1, 2-2, 2-3 had story context XML files, but 2-4 and 2-5 did not.

Impact: Inconsistent documentation and context availability for developers.

Root Cause: Story context generation was optional and skipped for later stories.

Lesson Learned: Either generate story context for ALL stories or NONE (consistency matters).

Action Item: Decide on story context policy: always generate or never generate for small epics.

---

Technical Debt

Current Debt: None significant

Observations:

• All components are clean and well-structured
• No shortcuts taken
• Print styles properly implemented
• Responsive behavior works correctly

Debt Avoided:

• Resisted temptation to inline styles
• Maintained component modularity
• Kept TypeScript strict mode enabled

---

Preparation for Epic 3: PDF Export

Dependencies Status

✅ All prerequisites met:

• Resume preview page exists and renders correctly
• Print mode detection (?print=true) implemented
• Download button placeholder ready
• .no-print class working
• A4 container dimensions set (210mm × 297mm)

Technical Prerequisites for Epic 3

Required:

1. Install puppeteer package: pnpm add puppeteer
2. Test local PDF generation
3. Configure Vercel for serverless Puppeteer:
   • Add @sparticuz/chromium for Vercel deployment
   • Update vercel.json with function config

Recommended:

1. Test print preview in multiple browsers (Chrome, Firefox, Safari)
2. Verify font loading in headless mode
3. Test PDF generation with varying content lengths

Potential Risks for Epic 3

Low Risk:

• Puppeteer setup is well-documented
• Architecture doc has clear deployment instructions
• Print styles already tested

Medium Risk:

• Vercel serverless function timeout (10s limit)
• Font loading in headless Chrome
• PDF file size optimization

Mitigation:

• Use Puppeteer's waitForNetworkIdle to ensure fonts load
• Test with max content length to verify timeout
• Monitor PDF file sizes and optimize if needed

---

Action Items

For Epic 3 Implementation

• Install puppeteer: pnpm add puppeteer
• Install Vercel Chromium: pnpm add @sparticuz/chromium
• Test local PDF generation
• Update vercel.json with serverless config
• Test PDF with varying content lengths

Process Improvements

• Add UX validation step before tech spec creation
• Review design templates when creating interfaces
• Decide story context policy: always or never for small epics
• Document architecture change process for future reference

Documentation

• Update architecture doc with lessons learned
• Document single-column layout decision rationale
• Add print mode testing checklist

---

Team Feedback

What the team said:

mahdi (Project Lead):

• "Epic 2 went smoothly overall. The architecture change was handled well."
• "Concerned about tracking changes - retrospective helps with that."

Dev Team:

• "Modular components made development easy."
• "TypeScript interfaces from Epic 1 saved a lot of time."
• "Print mode detection was straightforward to implement."

Scrum Master (Bob):

• "Team adapted well to architecture change."
• "Story context inconsistency is something to address."
• "Ready for Epic 3 with confidence."

---

Metrics & Velocity

Story Completion:

• Planned: 5 stories
• Completed: 5 stories
• Completion Rate: 100%

Quality:

• TypeScript errors: 0
• Runtime errors: 0
• Code reviews: All passed
• Technical debt: None

Velocity Observations:

• Stories 2-1, 2-2: Smooth implementation
• Story 2-3: Slight delay due to interface update
• Stories 2-4, 2-5: Fast implementation (learned from earlier stories)

---

Conclusion

Epic 2 was a success. The team delivered a complete, high-quality resume preview page that's ready for PDF generation. The architecture change was handled professionally, and the modular design will pay dividends in Epic 3.

Key Takeaway: Solid foundations (Epic 1) and modular design (Epic 2) enable rapid feature delivery.

Ready for Epic 3: ✅

---

Next Steps:

1. Update sprint-status.yaml: mark epic-2-retrospective: completed
2. Begin Epic 3 planning
3. Install Puppeteer dependencies
4. Review Epic 3 tech spec

---

Retrospective facilitated by Bob (Scrum Master)
Generated: 2025-12-01
Project: nuxt-portfolio - Resume Export Feature