An emotional, musical guestbook laid over a full 88-key piano keyboard. Each key can host a message from a visitor, optionally with a video, photo, and a custom sound.

• Full Range: Display a top-down, full-range piano keyboard (A0–C8)
• Clickable Keys: Open a modal with the note's content
• Audio Playback: Hover over keys to play sounds:
  • Custom sounds uploaded by users
  • Default piano notes synthesized with Tone.js

• Floating Music Icon: Top-right corner for easy access
• Rich Content Support:
  • Piano key selection
  • Title and message
  • YouTube video links or file uploads
  • Multiple photo uploads
  • Custom audio files for hover sounds
  • Password protection for future editing

• Detailed Display: Shows title, message, embedded videos, and photos
• Media Support: YouTube embeds and uploaded content
• Custom Audio Preview: Play and preview custom hover sounds
• Edit Access: Password-protected editing for note owners

• Password Protection: Secure editing with bcrypt-hashed passwords
• Full Editing: Modify all aspects of existing notes
• Media Management: Add new photos, replace videos/audio
• Safe Deletion: Confirmation prompts for permanent removal

• Frontend: React 18 with TypeScript
• Build Tool: Vite
• Audio: Tone.js for piano synthesis
• Backend: Supabase (Database + Storage)
• Authentication: bcrypt.js for password hashing
• Styling: CSS with responsive design

• Node.js 18+
• npm or yarn
• Supabase account

git clone <your-repo-url>
cd piano-ecard
npm install

1. Create a new Supabase project at supabase.com

2. Run the migration SQL in your Supabase SQL editor:

-- Copy and paste the contents of supabase-migration.sql

3. Create your environment file:

cp .env.example .env

4. Add your Supabase credentials to .env:

VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

# Development mode
npm run dev

# Production build
npm run build
npm run preview

The application displays all 88 keys of a standard piano:

• Range: A0 to C8 (88 keys total)
• Visual: Black and white keys with proper spacing
• Interactive: Click to view notes, hover to play sounds
• Indicators: Visual markers show which keys have notes

src/
├── components/          # React components
│   ├── Piano.tsx       # Main piano keyboard
│   ├── AddNoteModal.tsx # Note creation form
│   ├── ViewNoteModal.tsx # Note display
│   └── EditNoteModal.tsx # Note editing
├── types/              # TypeScript definitions
├── utils/              # Utilities
│   ├── supabase.ts     # Database operations
│   ├── audioUtils.ts   # Tone.js audio management
│   └── pianoUtils.ts   # Piano key generation
└── App.tsx             # Main application

• Responsive Design: Works on desktop and mobile
• Dark Theme: Musical, elegant color scheme
• Hover Effects: Interactive feedback on all elements
• Modal System: Clean, accessible modal dialogs
• Piano Aesthetics: Realistic piano key appearance

• Password Protection: Notes can be password-protected for editing
• Secure Hashing: bcrypt.js for password storage
• Row Level Security: Supabase RLS policies
• File Upload Security: Restricted file types and sizes

The application is fully responsive with:

• Scrollable piano on small screens
• Touch-friendly controls
• Optimized modal layouts
• Responsive key sizing

• Tone.js Integration: High-quality audio synthesis
• Custom Uploads: Support for user audio files
• Multiple Formats: MP3, WAV, and other common formats
• Hover Playback: Immediate audio feedback

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

This project is open source and available under the MIT License.