ABILITY: DaoXin

🛠️ daoxin: Technical Rigor & Atomic Architecture

A Reference Model for Lightweight Cross-Platform Applications with Rich Metaphorical Structures

The daoxin project serves as a structurally rigorous reference model answering a fundamental frontend architectural question: "How can abstract human will and accumulated consistency be preserved in the lightest, most robust data structure possible?"

By deliberately excluding heavy enterprise-grade global state management libraries, this project achieves bottom-up, atomic state management utilizing React and Jotai. On the styling layer, it bypasses external abstraction overheads by adopting browser-native Vanilla CSS to guarantee predictability and performance. Finally, it establishes a high-performance cross-platform pipeline using the Capacitor runtime environment.

The technical core pillars are:

Atomic Data Modeling via Jotai: Breaking away from monolithic state trees to manage schedules and analytical datasets using independent state nodes (Atoms).
Core-Dependent Data Architecture: Structuring multi-tier schedule layers and category statistics modules to be strictly subordinate to the top-level rules of the "Daoxin (道心)" core system.
Zero-Overhead Styling via Pure CSS: Constructing a web-standard presentation layer free from runtime style compilation and preprocessor build bottlenecks.
Capacitor Cross-Platform Optimization: Mastering a lean hybrid runtime deployment pipeline with minimal performance overhead.

Technical Challenges & Architecture Strategy

1. Pure CSS for Zero-Overhead High Performance

To implement a highly atmospheric, artistic Eastern identity—such as digital ink wash painting visuals, silk-textured layers, and traditional martial arts typography—the project relies entirely on browser-native Vanilla CSS.

It systematically eliminates the JavaScript runtime style computation costs inherent in CSS-in-JS approaches, while also discarding heavy preprocessor build steps to maximize the architectural simplicity of the frontend.
By utilizing the browser's native rendering engine directly, it ensures a seamless 60fps frame rate without micro-stutters during high-frequency interactions, such as immediate schedule mutations or dynamic statistical chart rendering within hybrid webview contexts.

2. Three-Page State Segmentation & Bounded Context

To maintain architectural integrity, the application segments data concerns into three distinct core page contexts, mapping each directly to independent Jotai state nodes.

Main View (Daoxin Core & Schedule Summary): Acts as the primary control hub, utilizing derived atoms to seamlessly combine the state of the inner "Daoxin" counter with summarized schedules for optimized initial rendering.
Category View (Classification & Statistics): Encapsulates complex computation logic that metrics abstract consistency, sorting individual routines into custom categories (similar to martial arts sects/disciplines) and transforming raw metrics into multi-dimensional statistical charts.
Schedule View (Multi-Scheduler Engine): A decoupled layout dedicated to registering, monitoring, and purging distinct workflows, managing everything from short-term daily routines to persistent long-term goals.

3. Core-Dependent Data Architecture (Trinary Hierarchy)

For habit-forming applications, the user experience heavily relies on how naturally long-term benchmarks and immediate schedules interlock. daoxin addresses this by tethering all lower-tier schedulers and classification structures to a single source of truth: the user's inner state context, "Daoxin (道心)". This trinary hierarchy is strictly enforced via TypeScript interfaces, preventing state divergence at compile-time and guaranteeing a rigid, unidirectional data flow.

Technical Decision Rationale

Jotai (Atomic State): Selected for its bottom-up composition model and clean derivation mechanisms. This allows granular, scattered scheduler states to sync reactively with the main hub through derived atoms without triggering unnecessary component re-renders.
Vanilla CSS: A deliberate engineering decision to avoid reliance on temporary library abstractions. Relying entirely on native web standards preserves the project's long-term archiving value and ensures optimal rendering performance.
Capacitor Hybrid Bridge: Chosen as the cross-platform solution because it packages standard web architectures natively without introducing heavy abstraction layers. This enables rapid deployment to mobile store ecosystems (such as Google Play Store) while retaining web-first iteration speeds.

Outcomes and Learnings

Successfully validated that wrapping an immersive, metaphor-heavy narrative (Xianxia/Spiritual Cultivation) around a strict data architecture maximizes product engagement and cognitive retention.
Demonstrated that the synergy of Vanilla CSS and Jotai drastically improves code isolation and read-write clarity in solo development environments, proving that rigorous structure scales down effectively.
Developed a highly efficient, production-ready hybrid deployment workflow that captures both the deployment simplicity of the web and the ecosystem reach of mobile platforms with minimal engineering friction.

📦 Repository & Technical Links

Core Repository: 🔗 github.com/yoonjonglyu/daoxin
Architecture Base: Built with React, Jotai, Capacitor, and Pure CSS as a lightweight hybrid reference application.
Web App: 🔗 Visit Live Site
Android App: 🔗 View on Google Play Store

🤝 Contact & License

← Back to Archive Github Web