EmailBeats is an innovative web application that allows you to create music simply by sending an email. Users can compose beats by writing a sequence of instruments in an email and instantly receive a link to listen to their creation.

• Composition by email: Send an email with your musical sequence
• Automatic generation: AI transforms your text into a musical beat
• Interactive playback: Playback interface with audio visualizer
• Easy sharing: Direct links and QR codes to share your creations
• Community gallery: Discover the latest beats created by the community

• Node.js 18+
• Supabase account
• Postmark account (for emails)
• Firebase account (optional, for hosting)

npm install

If you are using Firebase for hosting:

VITE_FIREBASE_API_KEY=your_firebase_api_key
VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id

npm run dev

The application will be accessible at http://localhost:5173

npm run build

npm run preview

Configure a webhook in Postmark that points to your Supabase Edge function:

• Method: POST
• Events: Inbound Email

1. Configure your domain in Postmark
2. Add the necessary DNS records
3. Create an email address [email protected]
4. Update the email address in the Vue components

1. Send an email to [email protected]
2. In the body of the email, write your instrument sequence
3. Example: kick snare kick kick snare hat hat hat
4. Instantly receive an email with the link to your beat

• kick - Bass drum
• snare - Snare drum
• hat - Hi-hat
• clap - Clap
• tom - Tom
• bass - Bass

kick snare kick snare
kick kick snare hat kick snare hat hat
bass kick snare clap bass bass snare kick

• Vue 3 with Composition API
• TypeScript for type safety
• Tailwind CSS for styling
• Vue Router for navigation
• Tone.js for audio synthesis

• Supabase Database for storing beats
• Supabase Edge Functions for processing emails
• Postmark for sending and receiving emails

src/
├── components/          # Reusable Vue components
│   ├── BeatVisualizer.vue
│   ├── EmailBox.vue
│   └── HowItWorks.vue
├── pages/              # Application pages
│   ├── HomePage.vue
│   ├── BeatPage.vue
│   └── NotFoundPage.vue
├── firebase/           # Firebase configuration
├── types/              # TypeScript types
└── supabase/
    └── functions/      # Supabase Edge functions
        └── process-email/

To add new instruments, modify:

1. The list in HowItWorks.vue
2. The mapping in BeatPage.vue
3. The validation in process-email/index.ts

The project uses Tailwind CSS with a custom color palette defined in tailwind.config.js.

Created with ❤️ and Vue.js

Translated with DeepL.com (free version)