Algorhythm

Algorhythm analyzes an artist’s song, scans social content from similar tracks, and surfaces proven strategies to spark content ideas and boost conversion. As the frontend developer and UX/UI Designer, I was responsible for building the entire user interface from scratch, creating design frameworks, and collaborating closely with the backend team to integrate complex data processing workflows.

The project spanned four months from October 2024 to January 2025, during which I successfully merged over 35 pull requests and completed more than 30 Jira tickets across frontend development. The work involved full-stack integration with real-time data processing systems, requiring close coordination between frontend and backend development.

The technical stack centered around React.js, Next.js, and TypeScript for the frontend, with CSS3 and responsive design principles guiding the styling approach. For backend integration, I worked with Supabase and REST APIs, while using Adobe XD for prototyping and mockups. Development tools included Git, GitHub, and Chrome DevTools for debugging and optimization.

One of the first major features I developed was the user authentication system. I implemented secure login and register functionality with Supabase, created protected routes and session management, and added comprehensive error handling for authentication edge cases. This foundation was critical for ensuring users could safely access their campaigns and data.

The campaign management interface became the heart of the application. I built an intuitive upload modal for music file submission, implemented campaign creation and management workflows, and added campaign deletion functionality with proper confirmation flows to prevent accidental data loss. Managing real-time processing states was particularly complex—I developed dynamic loading indicators for music analysis, implemented background job monitoring and status updates, and created error states and retry mechanisms for failed processes.

The project presented several significant challenges. The first was handling complex data integration—the backend API returned intricate nested data structures containing campaigns, songs, and videos that needed to be efficiently displayed in the frontend. To solve this, I created detailed data mapping diagrams using Eraser.io to visualize the data structure, collaborated with the backend developer to optimize API responses for frontend consumption, and implemented TypeScript interfaces to ensure type safety throughout the application.

Asynchronous music processing proved to be another major challenge, as music analysis could take several minutes, requiring sophisticated loading states and error handling. I addressed this by implementing a background job polling system, creating dynamic UI states that showed processing progress in real-time, and building automatic refresh mechanisms to update campaign status without requiring user intervention.

Cross-browser compatibility issues also emerged during development, with visual inconsistencies appearing across different browsers and screen resolutions, particularly with CSS box shadows. I established a comprehensive testing protocol across Chrome and Safari, used deployment previews to test fixes in production-like environments, and implemented fallback styling for browser-specific issues.