Project walkthrough · Cross-platform product engineering

Praxis Studio

A music-learning and practice product spanning a React web application, an Expo/React Native mobile application, reusable TypeScript music-theory logic, and a .NET backend.

Visit public website ↗All projects

Real product visual

Capture of the publicly accessible Praxis Studio homepage — Actual publicly accessible homepage, captured in a browser—not a mockup or mobile-app screen.

See the public site directly. A browser screenshot will appear above if the public-page capture succeeds; authenticated or subscription-only screens are not included.

Product architecture

The main design challenge is sharing deterministic music logic across two very different presentation platforms without forcing browser APIs, DOM assumptions, or native navigation into the common package.

flowchart TD
  W[React and Vite web app] --> S[Shared TypeScript music core]
  M[Expo and React Native mobile] --> S
  W --> A[ASP.NET Core API]
  M --> A
  A --> AP[Application layer and contracts]
  AP --> D[Domain bounded contexts]
  A --> INF[Infrastructure and EF Core]
  INF --> DB[(PostgreSQL)]

Logical dependency diagram based on the repository structure; not a production deployment topology. The shared core is client-side reusable logic, not an intermediary service.

Decisions visible in the implementation

Backend: a .NET 10 modular monolith with separate API, Application, Domain and Infrastructure projects; bounded contexts include Identity, Practice and Billing.
Platform-specific adapters: navigation, authentication session handling, native storage and audio playback remain outside shared TypeScript logic.
Shared domain calculations: the @praxis-studio/core package contains music logic for fretboard displays, modes, backing tracks, chords, exercises and settings.
Product workspaces: the web application distinguishes learning/creation activities from training/practice experiences, with routes and tested workspace-resolution logic.
Quality: the web and mobile projects include automated unit/component tests and the web project provides end-to-end test configuration.

Tradeoff: shared behavior versus platform boundaries

Platform-neutral musical calculations can be reused through the shared TypeScript package, while authenticated workflows, persistence and billing remain backend concerns. The architecture distinguishes common logic from platform-specific navigation, audio playback and native storage.

Evidence boundary

The application repository is private. This case study summarizes inspected source and documented architectural decisions without linking proprietary files, showing secrets, or disclosing operational security details. A public UI screenshot is evidence of the product presentation—not proof of any backend guarantee.