Overview
We built ChordCraft to allow users to capture their musical ideas before they disappear. The app features a virtual keyboard that responds to keypresses with sound, and instantly converts your playing into ABC notation that renders as sheet music. Everything you create is saved to MongoDB and tied to your account with user authentication.
Key Features
ChordCraft features an interactive virtual piano that maps 17 keys to your computer keyboard, including support for chords via a 200ms debounce system. As you play, the app provides real-time sound playback and visual highlights while instantly converting your input into ABC notation.
ABCJS is used to render dynamic sheet music as you play, with measures, clefs, and key signatures. The system also includes full CRUD operations for saving and organizing compositions, protected by user authentication.
Backend Architecture
The backend was built with Node.js and Express, utilizing MongoDB with Mongoose for flexible schema design. We implemented full CRUD functionality to manage musical compositions, where pieces are stored with their notation, titles, and descriptions. Each entry is linked to a specific user via userId reference to ensure data integrity and privacy.
Authentication is handled with JWT tokens validated through custom protect middleware. This middleware verifies tokens and attaches user information to incoming requests. The frontend communicates with this API via Axios, with comprehensive error handling and loading states managed through React state for a responsive user experience.
Frontend
We built the frontend with React and Vite. The keyboard component tracks active keys, held keys, and the current ABC notation string. The AuthContext provides global authentication state, making it easy to check if a user is logged in and protect routes. Toast notifications give feedback for save operations, errors, and authentication events.