Musical Letter

I recently built a side project called Musical Letter! It’s an interactive web application that lets you craft beautiful, personalized letters where certain words are magically replaced by scannable Spotify Barcodes.

When your loved one receives the image, they can simply open their Spotify app, tap the camera icon in the search bar, scan the barcodes, and listen to the exact songs you picked for them! 🎶

Try it out here: musical-letter.vercel.app

✨ Features & User Experience

The application features a fully WYSIWYG (What You See Is What You Get) interactive editor. You can type your letter directly onto the canvas, highlight any text, and instantly convert it into a scannable Spotify barcode by searching for a song.

There is ultimate customization, allowing you to:

• Pick solid colors or upload custom images for the card background.
• Change the background opacity, font family (integrating 15+ Google Fonts), font size, text color, and alignment.
• Customize the style of the generated barcodes to match your aesthetic perfectly.

Once finished, a high-quality export button renders your creation directly in the browser into a crisp, high-resolution PNG, ready for sharing on Instagram, printing, or texting.

🛠 Tech Stack & Architecture Deep Dive

The architecture blends a rich frontend DOM manipulation layer with a lightweight Node/Express backend.

Frontend: DOM Manipulation and Client-Side Rendering

The frontend relies heavily on native web APIs to provide a seamless editing experience without complex state management libraries.

1. The Editor: The text editor utilizes the HTML5 contenteditable attribute on a standard <div>. This allows users to type naturally while preserving formatting.
2. Text Selection and Injection: When a user highlights text to search for a song, the app uses the window.getSelection() and Range APIs. Once the backend returns a valid Spotify URI, the app dynamically injects an <img> tag directly into the user’s cursor position. This image points directly to scannables.scdn.co to render the barcode svg/png.
3. Local Rendering: The core technical achievement on the frontend is the “Download” feature. Instead of sending the HTML back to the server to render an image (which is slow and resource-intensive), the app uses html2canvas. This library traverses the DOM of the editor, parses the CSS styles, and redraws everything onto an HTML <canvas>.
4. CORS Handling: To prevent the <canvas> from becoming “tainted” by the external Spotify barcode images, html2canvas is configured with useCORS: true and ensure the injected images have the crossOrigin="anonymous" attribute set. This allows the final canvas to be safely converted into a base64 Data URL and downloaded locally as a PNG.

Backend: Express Proxy and Spotify Web API

The backend acts as a secure, stateless proxy to communicate with Spotify.

1. Express Server: The backend is built with Express.js (TypeScript). It serves the static frontend assets and exposes an /api/search-song endpoint.
2. Security & Rate Limiting: The server utilizes express-rate-limit to protect the Spotify API from being hammered by malicious clients.
3. Spotify Integration: The server requests an access token, caches it in memory until it expires (usually 1 hour), and uses it to query the Search API for tracks. It parses the results and returns only the necessary Spotify URI back to the frontend.

🖼️ Example Output

Building this project was a fantastic exercise in pushing the limits of client-side web APIs and managing third-party OAuth flows securely. You can view the full source code for more details!