Electron, Node.js & Spotify API
פיתחתי את Sterrify מתוך צורך אישי אמיתי: לשבור את המחסום שבין האזנה למוזיקה ב-Spotify לבין קריאת טאבים ב-Songsterr בזמן שאני אוחז בגיטרה. המטרה שלי הייתה ליצור סביבה שמאפשרת לי להתמקד במוזיקה במקום להתעסק במעבר בין טאבים באמצע נגינה.
האפליקציה שבניתי מסנכרנת בזמן אמת את השיר שמתנגן ב-Spotify עם הטאב המתאים ב-Songsterr, מה שחוסך את הצורך בחיפוש ידני. מעבר לזה, לקחתי את הפרויקט צעד קדימה עם אינטגרציה לחומרה: בניתי תמיכה ב-MIDI ובפדאלים, שמאפשרת לי לשלוט בניווט ובנגינה בלי להוריד את הידיים מהגיטרה.
Sterrify is a comprehensive Electron-based desktop application built to bridge the gap between structured guitar tabs (Songsterr) and live audio streaming (Spotify). It provides a unified, distraction-free environment for musicians by automatically syncing the currently playing track with the correct musical notation, saving users from constantly alt-tabbing while holding an instrument.
This project was developed out of a personal pain point and evolved into a robust workspace featuring real-time playback synchronization, dynamic UI injection for a seamless experience, and hardware integration for hands-free control via MIDI pedalboards.
- Spotify-to-Songsterr Auto-Sync: Actively monitors your live Spotify playback and dynamically loads the exact corresponding tab on Songsterr automatically.
- Auto-Instrument Selection: Intelligently parses tabs to prioritize Bass tracks (or specific setups) for users who play multiple instruments.
- Pedalboard & MIDI Integration: Supports hands-free navigation and control by interfacing natively with MIDI controllers and pedalboards.
- Discord Rich Presence: Automatically updates your Discord status to show off what song you are currently mastering.
- Built-in Seamless Metronome: Integrated practice tools that automatically pause external playback when focusing on timing.
Frontend (Renderer)
- Electron & webContents: For sandboxed, dynamically injected interfaces over existing web apps.
- Vanilla CSS & JS injected UI: Overriding standard DOM elements to create a native-feeling dark-mode pedalboard UI within Songsterr.
Backend (Main Process)
- Node.js & Electron Main: Managing underlying hardware, lifecycle events, and inter-process communication (IPC).
- Express.js: Local server architecture used for securely handling Spotify OAuth flows.
- Spotify Web API Node: For real-time polling of playback state and track metadata.
- easymidi: For hardware integration and translating MIDI signals into application events.
- Discord RPC: For rich presence integration.
This repository serves as a portfolio piece demonstrating my skills in building complex desktop applications that interface with third-party web services and local hardware. It showcases my ability to create creative solutions to UX problems, handle OAuth securely outside of a standard browser, and manage real-time event synchronization.
Note: This public repository is a sanitized, ToS-compliant version of the application. Certain custom DOM manipulation and scraping scripts have been replaced with safe filler files. For a fully working local copy, those files must be manually populated.
Built to eliminate the friction of digital practice sessions, Sterrify was engineered to keep the musician's hands on the instrument, not the mouse. By creating a smart wrapper that anticipates what the user needs to see, the focus shifts entirely back to the music.