All projects
Music SaaS · Full-Stack Web Platform·2026

Smart Setlist AI

A full-stack platform designed to help musicians create, organize, and optimize setlists for live performances, rehearsals, and creative sessions.

Open live project
ReactNext.js (App Router)TypeScriptTailwind CSSTanStack QueryZodNode.js

Overview

Smart Setlist AI solves a common musician workflow problem: building setlists manually without considering flow, diversity, and performance context. The platform provides an intelligent setlist workflow with filtering, contextual recommendations, and customizable chord management in one product experience.

Context

The project was built to simulate a production-grade setlist product for musicians and bands. The goal was to design a scalable architecture where users can generate setlists by genre and artist preferences, manage multiple setlists, and adapt songs dynamically to rehearsal and performance needs.

Problem

Build a reliable full-stack application that unifies setlist generation, curation, recommendation, and export workflows while maintaining a consistent UX and an extensible architecture for future stage mode and real-time collaboration features.

Responsibilities

  • Architected and implemented a modular Next.js App Router frontend with TypeScript and Tailwind CSS
  • Built setlist management workflows with add, remove, reorder, and replace operations
  • Implemented filtering and contextual recommendation flows based on genre, artist, and user preferences
  • Developed chord customization support with user overrides to adapt arrangements per musician context
  • Integrated export workflows for real-world usage including PDF and share-ready outputs
  • Designed reusable UI primitives and screens to keep interaction patterns consistent as features grew

Technical decisions

Modular feature boundaries in App Router

Feature-oriented modules were used to keep setlist generation, song operations, and export flows isolated, reducing coupling and enabling faster iteration with lower regression risk.

Query-driven data orchestration

TanStack Query handled async data synchronization and cache state across setlists and song operations, improving responsiveness and reducing redundant network requests.

Schema validation with Zod

Zod schemas were applied to critical payloads to guarantee consistent data contracts between UI and backend services as recommendation and customization logic evolved.

Architecture

A full-stack architecture with modular frontend/backend separation, structured data flow between UI and API, reusable components, and performance-oriented state management designed for future expansion into mobile, stage mode, and real-time features.

Challenges

  • Modeling dynamic setlist operations without breaking ordering consistency across edits
  • Balancing recommendation intelligence with predictable user control in creative workflows
  • Keeping rendering performance stable while supporting frequent reorder and replace interactions

Results

Delivered a unified musician workflow for generation, organization, recommendation, and export of setlists

Established a scalable technical foundation for future features such as stage mode and real-time collaboration

Improved UX consistency through reusable components and structured flow across all key setlist actions

Learnings

  • Creative tooling benefits from strong user control even when AI-assisted recommendations are available
  • Clear domain boundaries in full-stack apps accelerate feature growth without compromising maintainability
Back to projects