Update readme, need to fix voice-note.tsx

README.md

@@ -1,36 +1,52 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# Giftbox
 
-## Getting Started
+A playful web application for creating digital letters with various interactive elements. Built with Next.js and TypeScript.
 
-First, run the development server:
+## Features
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+- 📝 Add sticky notes with customizable colors
+- 📷 Upload and add photos with captions
+- 🎤 Record and add voice messages
+- 🎵 Embed Spotify tracks
+- ✏️ Draw doodles and sketches
+- 🖱️ Drag and drop interface
+- 🔄 Rotate and position items freely
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Tech Stack
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+- Next.js 14
+- TypeScript
+- Tailwind CSS
+- Web Audio API
+- Canvas API
+- shadcn/ui
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+## Getting Started
 
-## Learn More
+1. Clone the repository
+2. Install dependencies:
+```bash
+npm install
+```
 
-To learn more about Next.js, take a look at the following resources:
+3. Run the development server:
+```bash
+npm run dev
+```
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+4. Open [http://localhost:3000](http://localhost:3000) in your browser
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+## Usage
 
-## Deploy on Vercel
+- Click on toolbar items to add different elements to your letter
+- Drag elements to position them
+- Hover over elements to reveal controls
+- Click the delete button to remove elements
+- Use the color picker to customize note colors
+- Record voice messages directly in the browser
+- Draw doodles with the pencil tool
+- Add Spotify tracks via embed URLs
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## License
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+MIT

src/components/voice-note.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect, useRef, useCallback } from 'react'
 import { Play, Pause } from 'lucide-react'
 
 interface VoiceNoteProps {
@@ -47,7 +47,7 @@ export const VoiceNote: React.FC<VoiceNoteProps> = ({ audioBlob }) => {
     return `${mins}:${secs.toString().padStart(2, '0')}`
   }
 
-  const drawWaveform = () => {
+  const drawWaveform = useCallback(() => {
     if (!canvasRef.current || !audioBuffer) return
 
     const canvas = canvasRef.current
@@ -86,11 +86,11 @@ export const VoiceNote: React.FC<VoiceNoteProps> = ({ audioBlob }) => {
       ctx.fillRect(x, (height - barHeight) / 2, barWidth, barHeight)
       x += barWidth + gap
     }
-  }
+  }, [audioBuffer, currentTime, duration, canvasRef])
 
   useEffect(() => {
     drawWaveform()
-  }, [currentTime, audioBuffer])
+  }, [currentTime, audioBuffer, drawWaveform])
 
   const updatePlaybackTime = () => {
     if (!audioContext || !startTimeRef.current) return