• Townie
    AI
  • Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
project logo

cameronpak

voicemessages

Record, transcribe, and share voice notes
Public
Like
2
voicemessages
Home
Code
4
backend
3
frontend
3
shared
1
README.md
Branches
2
Pull requests
Remixes
5
History
Environment variables
1
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.
Sign up now
Code
/
Code
/
Search
index.ts
https://cameronpak--f2ac5c74384c11f0b09d9e149126039e.web.val.run
README.md

Voice Notes App

A web application for recording, transcribing, and sharing voice notes with expiration controls.

Features

  • πŸŽ™οΈ 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

User Stories

  • 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

Project Structure

β”œβ”€β”€ 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

Tech Stack

  • 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
HTTP
  • index.ts
    cameronpak--f2…9e.web.val.run
Code
backendfrontendsharedREADME.md
FeaturesVersion controlCode intelligenceCLI
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Terms of usePrivacy policyAbuse contact
Β© 2025 Val Town, Inc.