Back to board
music-studyFrontendTo do

Prepare an Expo React Native version of Music Study

Mobile app / Expo / React Native

Task metadata

music-study
Cadu
Frontend
14 hours
chat
Created May 6, 2026
Updated May 6, 2026

Original request

"Agora eu queria uma outra tarefa, que é pra criar um design system pra esse app. Ele já tá interessante assim, de usabilidade, mas eu quero que fique bem amarrado na parte visual e que eu possa modificar. Então eu queria que você desse uma olhada no outro repositório que eu tenho, que se chama Design System, e ver o que que aproveita de lá, o que que dá pra melhorar. Porque o que eu gosto dele, ele usa esse ChatCN Components, que eu achei perfeito pro nosso caso, eu quero usar isso também. E ele tem MCP, ChatCN tem, não sei se isso fica no repositório, e tem uma skill do ChatCN também. Além disto, tem esse Agentation Live Tool, tem umas ferramentas de DialKit, vários skills. Na verdade, eu queria aproveitar todos esses skills que tem e todas essas ferramentas de live tooling, onde eu modifico no próprio browser o design. Então isso tudo eu queria aproveitar. O jeito que ela é feita, assim, gosto de ver os componentes e tal. O único problema, eu gosto, estuda dela, a gente pode fazer uma cópia dela. O único problema é que ainda não tá muito legal esse flow de passar um design do design system para o projeto, no caso, por exemplo, para o Regla Bucks, ou vice-versa. Eu sei que eu tenho lá scripts para isso, mas não tá tão prático, eu não sei. E outra coisa, eu não tô usando o Dial Kit tão eficientemente, mas enfim, só instalar, depois eu vou aprender a usar. Esse da música seria menor, talvez com mais... Talvez a gente faça só os primitives, que aí fica mais fácil de fazer essa sincronização, não sei. Aí eu quero que você me explique como é que faz a melhor forma de sincronizar ali. Eu modifico um componente no design system e ele já vai para o site. Aí tá. Bom, aí a tarefa é criar esse design system a partir do meu repositório que já existe, copiando tudo o que eu falei.


Daí uma outra task. Acho que você mesmo pode pesquisar, dar uma olhada e resumidamente me mostrar, me explicar como é que faz para deixar isso disponível na App Store ou na outra do Android. Tanto pra iOS quanto pra Android. E me relembra ali as ferramentas que eu uso pra isso, React Native. Tem um outro aqui que eu tenho uma certa familiaridade, que se chama...Expo Go. Não sei se você conhece, é de fazer aplicativo. Eu já usei, mas não lembro bem como é que usa. Eu imagino que dá pra fazer com ela. Então, outra tarefa é talvez já colocar isso. Usar o Expo Go, porque eu vou fazer um... Depois eu vou pedir pra você... Você tem que fazer essa tarefa pensando que isso vira um prompt depois. Então você tem que escrever da melhor forma. E aí eu vou pedir go pra você ou pra outro IA fazer um prompt. E a gente vai fazer. Então eu acho que se o Expo Go funcionar com com a gente, API, não sei, eu imagino que sim, é que a gente vai criar o prompt depois, que vai ter que instalar o React Native, tudo o que precisa pra fazer a versão mobile, app de verdade e os passos de dificuldades de colocar na AppStore. Eu vi que tem uma questão de desabilidade, precisa ser boa, do design tem que ser bonito, que ele tem que ser útil. Então, o nosso app tem que ser assim. Ele já é útil, ele tem que ficar fera no design, então pode se basear nos melhores apps aí do de música e tal pra... iOS. Eu gosto do design do iOS, então... Essa é outra tarefa, fazer ela já pensando que eu vou criar o prompt para criar isso tudo, lembrando a explicação do próximo passo, que é deixar ele botar na App Store. A pesquisa do design. Vamos falar aplicativos que eu não gosto de música. Tem um que é super caro, que se chama Tonal Energy. E eu acho ele cheio de coisa demais, muito feio a interface. É útil, faz um milhão de coisas. O Expo Goose é lindo, cinza, meio azul escuro, ícones interessantes que usam um negócio glesa aqui do iPhone, enfim, tem que ficar com cara de app.

Na parte da pesquisa, eu quero entender, não sei se tem esse app, eu esqueci o nome, o ícone que eu te mandei. pra testar aplicativos iOS. O round que a gente usa é tipo um Discord que tá lá. Então isso é uma alternativa. Bom, eu sei que é um bom jeito de começar a testar, mas o objetivo mesmo é colocar na na App Store. Então, acho que talvez se tiver espaço antes, você me explica melhor. Lembrando que esse Expo Go, eu não lembro mais como é que usa, então essa tarefa é meio que pra depois também me descrever no report como é que... me relembrar como é que usa e junta essas ferramentas todas. Porque eu tô mais acostumado com o React normal pra web.

Bom, talvez se você acha que o que eu falei fique melhor dividido em mais tarefas, de acordo com a pessoa nos próprios do futuro e tal, então fica à vontade, faz quanto você achar melhor pra ficar mais organizado pra mim, e eu vou me dar pra download. Lembrando que é importante que você dê uma olhada depois de tarefas e veja como é que ele funciona, com os arquivos de agente, com o negócio de copiar o prompt do task pro agente executar. O sistema de reports, cada task tem um report, mas também pode ter um general report e tem research também. Então se você achar que alguma dessas, provavelmente uma vai para research. É isso."

Structured task

Problem

The current music-study project is a web app. To become a real iOS/Android app, it needs a mobile implementation path using React Native and Expo while preserving the educational value, music-theory engine, audio feedback, and polished design direction.

Context

Cadu is more used to normal React web development. The mobile implementation should therefore be incremental, explicit, and agent-friendly. The app should not be treated as a simple webview unless that is consciously chosen later. The better long-term path is to share or port the pure theory logic, then rebuild the interface with React Native components and an iOS-quality visual system.

Expected

Create a mobile-app foundation using Expo and React Native.

The implementation should:

  • Decide and document the structure before coding:
    • Option A: create a sibling Expo app such as music-study-mobile.
    • Option B: convert to a monorepo with apps/web, apps/mobile, and shared packages/theory.
    • Option C: keep web and mobile separate at first, manually copying theory modules until the shared package is justified.
  • Prefer a structure that keeps the web app stable.
  • Set up Expo with TypeScript.
  • Port or share pure theory modules:
    • scale definitions
    • mode definitions
    • chord construction
    • note constants
    • comparison logic
    • future Lydian Chromatic Concept data
  • Rebuild mobile UI with React Native primitives:
    • Home/app shell.
    • Tonic selector.
    • Scale selection controls.
    • Scale cards.
    • Harmonic field cards.
    • Modes cards.
    • Comparison empty state and comparison view.
    • Future Lydian Chromatic Concept tab placeholder.
  • Implement audio playback in a mobile-compatible way.
  • Test in Expo Go first for fast iteration.
  • Add instructions for:
    • starting the Expo dev server
    • opening the app in Expo Go
    • creating a development build if Expo Go is not enough
    • preparing production builds later with EAS Build
  • Keep design aligned with the Music Study design-system direction:
    • polished iOS-like dark blue-gray surface.
    • clean spacing.
    • strong note/tone buttons.
    • elegant icons.
    • useful, uncluttered educational screens.
  • Validate:
    • TypeScript compile.
    • Expo dev server starts.
    • The app opens on a physical device through Expo Go or documented alternative.
    • Basic navigation works.
    • At least one scale/mode/chord screen renders with real data.

Notes

  • Do not attempt App Store submission in this implementation task. Submission should come after the research task and after the mobile app is stable.
  • Do not rewrite the existing web app unless the chosen structure requires a clearly documented shared package extraction.
  • Avoid duplicating theory logic forever. A shared package is preferred once the first mobile proof of concept works.
  • Do not overload the first mobile version. The app should feel focused and premium, not like a dense utility tool.