In Progress

Lectio

React Native Expo TypeScript UniWind Zustand React Navigation Axios

Overview

Most Komga clients are designed around manga and comics — page-by-page image viewers that feel awkward for books. Lectio is built specifically for readers whose libraries are mostly EPUB, PDF, and FB2. The goal is a reading-first experience: a clean library layout with large covers, readable metadata, and a reader that feels closer to a dedicated e-reader than a comic app. It connects to a self-hosted Komga server and supports a bundled demo mode for sharing the app with people who don't have a server.

What I built

Full library browsing: libraries, series, books, authors, collections, and reading lists
Search, filter, and sort across the entire Komga library
Komga session token auth with Basic auth fallback for image requests
Zustand stores for auth, library state, browse, bookmarks, and read progress
UniWind for cross-platform styling with multiple built-in themes
Demo mode with a bundled static library, no server required, great for sharing
Provider abstraction layer to support additional backends (Kavita tentatively planned)

What I learned

React Native and Expo ecosystem differences from web development — native navigation, layout, and gesture handling
Designing a provider abstraction so the app is not hard-coupled to a single backend API
Managing auth state with Zustand and AsyncStorage across app restarts and token refresh
Building cross-platform themes in UniWind that feel native on both iOS and Android

Architecture

flowchart TD
    User([" User"])

    subgraph App["Lectio · React Native (Expo)"]
        Nav["React Navigation
(bottom tabs + native stack)"]

        subgraph Screens["Screens"]
            Login["Login"]
            Home["Home / Libraries"]
            Browse["Series · Books
Authors · Collections"]
            Reader["Reader"]
        end

        subgraph State["Zustand Stores"]
            AuthStore["Auth Store
(AsyncStorage)"]
            LibStore["Library / Browse"]
            Progress["Read Progress
& Bookmarks"]
        end

        Provider["Komga Provider
(Axios)"]
        Theme["NativeWind
Theme System"]
    end

    Server["Komga Server"]
    Demo["Bundled Demo Library"]

    User --> Nav
    Nav --> Screens
    Screens --> State
    State --> Provider
    Provider -->|"REST API"| Server
    Provider -->|"demo mode"| Demo