
Flux: Engineering a Private, AI-Driven Reading Experience
In an era of cloud-dependency and data tracking, Flux was born from a simple question: Can we build a premium AI reading assistant that runs entirely on local hardware? Flux is a sophisticated "Self-Hosted Cloud" platform designed to help language learners move from struggling with text to fluent comprehension through interactive AI tokenization and neural audio.
đź§ The "Self-Hosted Cloud" Architecture
Most AI apps are thin wrappers around expensive APIs. Flux takes a different approach by treating your local machine as the cloud provider.
- Hybrid Monorepo: Using NPM Workspaces, I managed a React 19/NextJS frontend and a NestJS backend in a single repository.
- The Backend "Brain": The NestJS server acts as a secure proxy. While the frontend feels like a native app, the backend handles the heavy lifting—managing persistence via Prisma and orchestrating requests to Ollama (the local LLM engine).
- AI Abstraction: The frontend never talks to the AI directly. By proxying through NestJS, the system is future-proof; I can swap local models for OpenAI or Anthropic without changing a single line of frontend code.
✨ Engineering the User Experience
Building a tool for "Deep Reading" required solving complex UI and synchronization challenges that go beyond standard web development.
1. Interactive Tokenization
Text isn't just a string in Flux; it’s an interactive map. I developed a tokenization engine that breaks down text into selectable units. This allows for:
- Context-Aware Dictionary: Hovering over a word doesn't just give a definition; it sends the surrounding sentence to the local LLM to provide a translation that fits the specific context.
- Streaming AI Content: Users can generate custom reading material, which is delivered via NDJSON streaming for real-time feedback.
Inmmersive and comprehensive learning

Gamified and Responsive

Interactive

Highly customazible

More features:

2. Neural Audio & Karaoke Sync
To aid pronunciation, Flux features a high-fidelity audio engine.
- Karaoke Highlighting: Using the browser’s Speech Synthesis API, I implemented real-time word highlighting that stays perfectly synced with the audio playback.
- Smart Resume: The system tracks playback position at the sentence level. If you pause, Flux intelligently resumes from the start of the last logical thought, ensuring natural continuity for the learner.
🛡️ Privacy as a Core Feature
The primary value proposition of Flux is Zero Data Leakage.
By containerizing the PostgreSQL database and leveraging local LLMs, Flux ensures that a user's reading habits, saved vocabulary, and generated texts never leave their network. It provides the "smart" features of a modern SaaS without the subscription fees or the privacy trade-offs.

🛠️ The Tech Stack
- Frontend: React 19 (Signals-ready), TypeScript, Tailwind CSS, Zustand (State Management), Framer Motion.
- Backend: NestJS, Prisma ORM, Express.
- Infrastructure: Docker (Postgres), Ollama (Local LLM).
đź’ˇ The Takeaway
Flux demonstrates my ability to build vertically integrated products. It shows proficiency in modern React patterns, backend proxying, and the emerging field of local AI integration. It’s a project that balances complex technical requirements with a clean, user-centric design.
Crafted with ❤️ by Stanley Morales