Public
Like
2
voicemessages
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data β all from the browser, and deployed in milliseconds.
index.ts
https://cameronpak--f2ac5c74384c11f0b09d9e149126039e.web.val.run
A web application for recording, transcribing, and sharing voice notes with expiration controls.
- ποΈ Record voice notes directly in the browser
- π€ AI-powered transcription using OpenAI Whisper
- π Share voice notes via unique URLs
- β° Set expiration by max listens or date
- π Dashboard to view and manage all your voice notes
- ποΈ Delete voice notes you no longer need
- π± Responsive design with modern UI
- I can record a voice note
- Given I record a voice note, it is transcribed by AI
- Given I have recorded a voice note, I can share that voice note with someone via URL
- I can set an expiration for the voice note by number of max listens (i.e. 1 listen)
- Or, I can set an expiration for the voice note by choosing an expiration date
- I can see which voice notes I have sent
- I can delete voice notes I no longer need
βββ backend/
β βββ database/
β β βββ migrations.ts # Database schema
β β βββ queries.ts # Database operations
β βββ routes/
β β βββ voicenotes.ts # Voice note CRUD operations
β β βββ static.ts # Static file serving
β βββ index.ts # Main Hono server
βββ frontend/
β βββ components/
β β βββ App.tsx # Main app component
β β βββ VoiceRecorder.tsx # Recording interface
β β βββ VoicePlayer.tsx # Playback interface
β β βββ ShareModal.tsx # Sharing configuration
β β βββ Dashboard.tsx # Voice notes management
β βββ index.html # Main HTML template
β βββ index.tsx # Frontend entry point
β βββ style.css # Custom styles
βββ shared/
βββ types.ts # Shared TypeScript types
- Backend: Hono (TypeScript API framework)
- Database: SQLite for voice note metadata
- Storage: Val Town Blob storage for audio files
- AI: OpenAI Whisper for transcription
- Frontend: React with TypeScript
- Styling: TailwindCSS