Goal: Build an interactive web-based Sony Walkman 2 music player that resurrects 80s technology with modern web capabilities.
Resurrection Category: Bringing dead tech to life
Primary Focus: UI/UX fidelity + functional music playback
Kiro Usage: Spec-driven development + vibe coding
Deliverable: Working web app + GitHub repo + demo video
🛠️ TECH STACK
Frontend: HTML/CSS/JavaScript
Audio: Web Audio API
File Upload: FileReader API
IDE: Kiro (vibe coding + specs)
Styling: CSS animations for button feedback
Repo: GitHub (public, OSI license)
📦 DELIVERABLES
✓ Fully functional web app
✓ .kiro directory in repo (specs/hooks)
✓ Public GitHub repository
✓ 3-minute demo video (YouTube/Vimeo)
✓ Write-up on Kiro usage
✓ Devpost submission
🎯 SUCCESS CRITERIA
Walkman UI visually accurate & interactive
Upload MP3s, insert cassette, play audio
All buttons responsive & satisfying
Smooth animations & visual feedback
Effective Kiro usage demonstrated
Code clean & well-documented
🎨 UI COMPONENTS
Walkman 2 body replica (scaled for web)
Cassette slot visualization
Play/Pause/Stop buttons
Rewind/Fast-forward buttons
Volume slider control
Headphone jack indicator
LED time display
Eject button & mechanism
🎵 MUSIC PLAYBACK
MP3 file upload interface
Create virtual "cassette" with songs
Play/pause functionality
Track progression display
Volume control (0-100%)
Time elapsed / total duration
Audio visualizer (bonus feature)
Cassette eject & reset
✨ INTERACTIVE ELEMENTS
Button press animations
Cassette insertion transition
LED lights during playback
Tactile feedback (hover states)
Real-time time counter
Smooth slider interactions
Cassette eject animation
Visual play state indicators
📊 BONUS FEATURES
Audio visualizer animation
Multiple color Walkman variants
Shuffle mode for cassette
Playlist management
Local storage for saved cassettes
Keyboard shortcuts (spacebar to play)
Dark mode aesthetic (spooky!)
Mobile-responsive design
🤖 Kiro Strategy: Use Kiro's vibe coding for rapid UI generation, then refine with specs for consistency. Define component behaviors in steering docs to ensure Kiro maintains design fidelity throughout development.
💬 VIBE CODING APPROACH
Strategy: Conversational development with Kiro
Phase 1: "Create a Sony Walkman 2 UI..." - get initial structure
"Use CSS for animations, not JavaScript where possible"
"Buttons must have clear press/hover states"
"No localStorage - keep state in JavaScript"
"Ensure accessibility with ARIA labels"
🔌 AGENT HOOKS (OPTIONAL)
Leverage Kiro's agent hooks for:
Pre-development: Generate component structure
Mid-dev: Request code review/optimization
Testing: Auto-generate test cases
Documentation: Generate README + write-up
Demo: Help script the 3-min video narration
48-Hour Hackathon Schedule
HOUR 0-4: DESIGN & SPECS PHASE
Duration: ~4 hours | Start: Day 1 Morning
✓ Finalize Walkman 2 design specs
✓ Create .kiro/specs with component definitions
✓ Write steering docs for UI consistency
✓ Plan feature prioritization
✓ Set up GitHub repo with OSI license
HOUR 4-28: DEVELOPMENT PHASE
Duration: ~24 hours | Work: Day 1 Afternoon + Night + Day 2 Morning
✓ Use Kiro vibe coding to build UI components
✓ Implement Web Audio API integration
✓ Add file upload functionality
✓ Create cassette insertion/ejection mechanics
✓ Polish animations & button feedback
✓ Regular commits to GitHub (show Kiro usage in commits)
✓ Continuous testing & iteration
HOUR 28-36: TESTING & REFINEMENT
Duration: ~8 hours | Work: Day 2 Late Morning + Afternoon
✓ Record 3-min demo video showing all features
✓ Demonstrate Kiro's role in development
✓ Show cassette upload → playback flow
✓ Highlight UI interactivity & animations
✓ Upload to YouTube/Vimeo (make public)
HOUR 40-48: SUBMISSION & DOCUMENTATION
Duration: ~8 hours | Buffer Time: Day 2 Late Evening
✓ Write comprehensive Kiro usage write-up
✓ Document how specs & steering improved dev process
✓ Create engaging project description
✓ Submit on Devpost with all links
✓ Final GitHub push
✓ Buffer for last-minute fixes
Team Structure (3 People)
Note: Roles are primary focuses, but expect overlap and collaboration throughout
👤 ROLE A: KIRO DEVELOPMENT LEAD
Primary Responsibilities:
• Lead vibe coding conversations with Kiro
• Build HTML/CSS/JS structure for Walkman
• Implement Web Audio API integration
• Handle file upload functionality
• Manage GitHub commits & repo
Key Skills:
React Native/JavaScript expertise
Web Audio API familiarity
CSS animations knowledge
Kiro IDE experience
Design eye for detail
CSS/animation knowledge
Walkman 2 reference familiarity
User experience thinking
👤 ROLE C: DEMO & SUBMISSION
Primary Responsibilities:
• Record & edit 3-min demo video
• Write Kiro usage documentation
• Create engaging Devpost submission
• Document development process
• Showcase how Kiro accelerated dev
Key Skills:
Video production/editing
Technical writing
Communication & storytelling
Devpost experience
Mitigation:
• Prioritize: Walkman UI → Upload → Playback → Polish
• Define MVP in specs early
• Track time allocation by feature
• Save "bonus features" for final hours only
⚠️ RISK 2: Audio API Compatibility
Issue: Web Audio API browser support issues
Mitigation:
• Test early on target browsers (Chrome, Safari, Firefox)
• Use standard APIs with good support
• Have fallback HTML5 audio element ready
• Test audio on mobile devices early
⚠️ RISK 3: Kiro Learning Curve
Issue: Team unfamiliar with Kiro IDE workflow
Mitigation:
• Dedicate first 30 mins to Kiro tutorial
• Leverage existing JS expertise
• Have Kiro docs open during development
• Use vibe coding as primary interaction style
⚠️ RISK 4: Time Zone / Async Work
Issue: KL-Singapore commute + team coordination
Mitigation:
• Lock in fixed working hours for all 3
• Use GitHub commits for async handoffs
• Daily standup at consistent time
• Write clear commit messages showing Kiro usage
⚠️ RISK 5: File Upload Security
Issue: Handling MP3 uploads safely
Mitigation:
• Validate file type (MP3 only)
• Limit file size (e.g., 50MB per cassette)
• Use FileReader API (client-side only)
• No server uploads needed for demo
Success Factors
✓ CLEAR MVP DEFINITION: Agree on minimum features (Walkman UI + file upload + playback) in first 2 hours. Everything else is bonus.
✓ KIRO SPECS: Spend time upfront creating good specs in .kiro directory. This guides Kiro's code generation and ensures consistency.