Extended Bandoneon

Role: Fullstack Web Developer – Product Designer
Project: Independent Artistic Platform

Designed and developed Extended Bandoneon, a fullstack multimedia platform dedicated to documenting and systematizing advanced bandoneon extended techniques. The application combines structured research content, embedded media, and a curated sound bank into a scalable digital archive built with modern web technologies.

View the project: Source code on GitHub — Live website

Core Responsibilities & Contributions

Product Architecture & System Design

Architected fullstack application using Next.js, React, TypeScript, and Tailwind CSS
Designed relational MySQL database schema for techniques, articles, sounds, and users
Structured scalable App Router architecture aligned with modern Next.js standards
Planned deployment strategy optimized for Vercel infrastructure

UI Architecture & Frontend Engineering

Built responsive, accessible interfaces with semantic HTML and WCAG-conscious structure
Designed reusable component-driven UI system
Implemented dynamic routing for technique and article detail pages
Integrated embedded multimedia (video demonstrations and audio previews)

Content & Research Platform

Extended Techniques Module

Developed structured showcase for extended bandoneon techniques
Created dedicated pages including descriptions, supporting images, and embedded demonstrations
Implemented SEO-optimized URL architecture for content discoverability

Articles & Research System

Built article listing interface
Implemented detailed article pages with abstract, full content, and PDF download support
Structured content model for CMS integration

Sound Bank

Engineered scalable sound archive with cursor-based pagination and infinite scrolling
Implemented multi-select tag filtering with searchable classification system and relational taxonomy
Integrated lazy-loaded custom audio player for optimized media rendering
Built multi-format audio download handling with client-side blob streaming and UX feedback
Generated dynamic schema.org structured data (JSON-LD) to enhance search engine indexing

Podcast

Developed a dedicated podcast page featuring a sortable list of episodes with embedded audio players
Structured metadata and layout to align podcast content with the broader research and soundbank ecosystem

Admin Dashboard & Content Management

Developed protected admin dashboard for managing platform content
Implemented modular dashboard architecture with dynamically loaded components
Built sound upload interface for managing audio assets
Structured system for future expansion to article and technique management forms
Integrated authenticated logout flow and protected routing

SEO & Performance Optimization

Implemented Server-Side Rendering (SSR) and Static Site Generation (SSG)
Structured metadata using Next.js Metadata API
Applied schema.org structured data for articles and media content
Optimized media loading with lazy loading and modern image strategies

Authentication & Future Scalability

Designed registration and login architecture with secure email/password authentication and email verification flow
Planned role-based access control for public users and administrators
Prepared system structure for future interactive audio tools and user accounts