Keyboard Measurement Pipeline & Popup-State Hook

Engineered a keyboard management and built a declarative popup-controll hook.

What was done:

• Custom Keyboard-Offset Hook: Built a hook to subscribe to native keyboard height events.
• Layout Shift Prevention: Refactored AddTodoInput to dynamically adjust bottom offsets based on real-time keyboard metrics.
• Universal Popup Component: Standardized backdrop animations, gesture dismissal, and positioning into a headless overlay container.
• Popup-Control Hook: Developed usePopup to encapsulate popup parameters, visibility controllers, and click-the-backdrop handler.

State-Driven Dynamic Routing & Upgrade UI with animations

In short: Instant, zero-latency switching between workspaces, implemented by replacing expo-routing with reactively changing internal state.

What was done:

• Routing-to-State: Replaced Expo Router with React state for internal workspace switching.
• UX optimization: Prevented global remounting of App caused by workspace toggles.
• UI Development: Connected the WorkspaceManager and DB-syncing to a clean, intuitive UI layer.
• Animations: Integrated custom react-native-reanimated transitions to Workspace Popup.
• Performance: Reduced workspace switching latency to state-updating-time while keeping background DB actions fully synced.

Database Schema Migration & Bidirectional Syncing

In short: Built a pipeline that auto-generates default workspace, added DB migrations, added relations between workspaces and todos, created a workspaceManger to send request to SQLite, added DB-to-UI sync.

What was done:

• Database & Schema Migrations: Designed and executed SQLite schema migrations with relations between todos and workspaces.
• Dynamic Routing: Integrated workspaceId into application navigation state for context-aware (workspaces) data isolation.
• WorkspaceManager Pattern: Created a unified WorkspaceManager layer to centralize database queries.
• First-Boot Pipeline: Implemented auto-generation of user’s first workspace.
• Bidirectional Sync: UI is watching the DB updates now.

Reusable Modal Backdrop & Component Composition Architecture

Refactored backdrop rendering layer for all app-level modals.

What was done:

• Architecture: Evaluated custom hook implementation for state isolation vs wrapper component design
• Component Composition: Placed backdrop fade logic into a standalone component (Backdrop) supporting children injection.
• Refactoring: Replaced duplicated backdrop styles across modals with a single declarative API.

Queue drop fix & Refactoring

What was done:

• Bugfix: Resolved event dropping in syncService during state updates.
• Architecture: Refactored queue state management from component-level code into a reusable useTodo custom hook for better side-effect isolation.

🔄 Queue-based sync: instant UI, background persistence

I added a small SyncService queue to keep the UI and storage in sync
without blocking renders.

How it works: the UI updates instantly (optimistic update), then the
service persists the change to SQLite in the background, one task at a
time.

So, since i want to create a responsive local-first app, I have to implement the next sync schema: ui -> state -> local db -> queue -> server-db -> clients-notifications -> pulling -> render. I have already implemented the first step: ui -> state. Now I am at the stage of developing the next step of syncing: state -> local db. The whole project is so large, so i decided to start form fully local app. Which means i am not going to develop the server-side and client - server synchronization with conflict resolution. I already installed the drizzle ORM, and created the external Task Manager. I chose the Object because of the Single-Responsibility principle (UI must be just a renderer of the content, the logic is outside), i could also use the class, but the objects are “cleaner” than the classes, which can be counted as boilerplate.

Jaw: First Look 🎬

Sharing the first video of Jaw!

Done so far: smooth transitions + workspace popup picker. Stack is React Native (Expo) + TS + Reanimated, SQLite in progress. Design inspo is Telegram - love its UX and engineering.

I’m not a designer, so ideas to make it more user-friendly are super welcome - drop them in the comments!

Why Jaw?

1. Local-first. Works fully offline, syncs when you’re back online. Shipping a fully local version first to get it usable faster. Server (sync + conflict resolution) is WIP.

2. All-in-one. You only need this one app. Everything is deeply integrated: you can link a note inside a task, attach a pomodoro timer to a task, etc.

It’s a monolithic workspace for students with 4 modules:

• Todo / Planning - simple list for everyday stuff. Switch to calendar view for curriculum, events, and repeatable tasks.
• Time - time management and pomodoro timers.
• Notes - fast capture for ideas & info. Attach files and link anything else from Jaw.
• Study - Anki/Quizlet-style flashcards, AI-powered interactive tests and games.

NextUp: multi-user and public workspaces + live-editing for all modules.

Would you use an all-in-one workspace like this? What would you change/add?

P.S. This is just the first idea dump. I’ll be posting more devlogs (for the people who are into coding) as I build, so stay tuned!

Just sharing the first screen of the app

Workspace Layout Decomposition & Animated Navigation

What was done:

Component Architecture: Deconstructed monolithic layout into reusable components

Interactive UI: Built custom workspace selection popup modal with dynamic backdrop

Micro-interactions: Fine-tuned react-native-reanimated layout transitions and tab indicator springs for zero-lag UI feedback.

Hey, I am creating the personal workspace (mobile app) for students and for myself. I will share the ideas of all of these modules step by step during the developing. This screenshot shows my first component (nav-bar)