The tech stack behind InkRows

Source: Dev.to

Overview

InkRows is a modern note‑taking app designed to work seamlessly across web and mobile platforms. Behind its clean, intuitive interface lies a technology stack that prioritizes developer experience, performance, and user engagement. Let’s explore the technical architecture that powers InkRows.

⚛️ Frontend – React 19 + TypeScript

• React – The UI library that powers the app.
• TypeScript – Provides static typing, which becomes invaluable as the project grows, during refactors, or when updating dependencies.

🏗️ Build System – Vite 7 + SWC

• Vite – Fast dev server with instant startup and hot‑module replacement.
• SWC – Used for transpilation instead of Babel, keeping build times ultra‑fast.

📱 Cross‑Platform Mobile – Capacitor 8

Capacitor lets us write the app once in React/TypeScript and deploy to web, iOS, and Android without maintaining separate codebases. Plugins bridge web and native APIs, giving access to the camera, filesystem, and other native features.

🎨 Styling – Tailwind CSS 4 + PostCSS

• Tailwind CSS – Utility‑first styling that eliminates the need for naming classes or managing large CSS files.
• Integrated with Vite and processed through PostCSS for a lean build.

🧠 State Management – Zustand

Zustand provides a lightweight store without Redux‑style boilerplate. State is split into slices (e.g., userSlice, todosSlice, tagsSlice, settingsSlice) for predictable and testable mutations.

✍️ Rich Text Editing – Lexical

Lexical (by Meta) powers the note editor. Its plugin system makes it easy to add custom formatting, tables, and any other feature you can imagine.

💾 Data Persistence – Multiple Layers

☁️ Backend – Supabase

• PostgreSQL database
• Authentication & Edge Functions
• S3 file storage
• Real‑time subscriptions for live sync

🏠 Local Storage – Dexie

Dexie (an IndexedDB wrapper) stores data offline and syncs with Supabase when the network is available, enabling optimistic UI updates.

🔍 Data Querying – TanStack Query

Manages server‑state caching, background refetching, and optimistic updates for a responsive UI.

💰 Monetization – Stripe Integration

Stripe handles payments; Supabase Edge Functions validate webhooks and manage subscriptions.

🧩 UI Component Library – HeroUI

HeroUI offers accessible, pre‑built components that work out‑of‑the‑box with Tailwind CSS.

✨ Animation & Interaction

• Framer Motion – Smooth animations and gestures.
• dnd‑kit – Accessible drag‑and‑drop for list sorting and other interactions.

📊 Analytics & Feedback

• PostHog – Product analytics.
• Supabase function – Custom feedback collection.

🌐 Progressive Web App (PWA)

InkRows works offline as a PWA with:

• Service Worker – Offline functionality.
• App Manifest – Installable experience.
• Workbox – Advanced caching strategies.

🏛️ Architecture Highlights

📦 Modular Organization

src/
├── features/   # Feature‑specific modules
├── shared/     # Reusable components, hooks, utils
├── services/   # API and external service integrations
├── app/        # Application state and handlers
└── config/    # Centralized configuration

🛡️ Type Safety

With TypeScript (skipLibCheck: false) we get:

• End‑to‑end type safety.
• Auto‑generated Supabase types.
• Props validation and richer IDE support.

🛠️ Development Experience

• Fast HMR via Vite’s native ES modules.
• Separate build configs for web, iOS, and Android.
• Live‑reload support for mobile development.
• Environment variables managed with loadEnv.

npm run dev                 # Web development
npm run ionic:dev:ios      # iOS development with live reload
npm run ionic:dev:android  # Android development with live reload
npm run build              # Production build

🚀 Deployment

• Web – Static site hosting (Netlify).
• iOS – TestFlight & App Store via Xcode.
• Android – Google Play Store via Gradle builds.

🏁 Conclusion

The InkRows stack reflects practical choices made during development:

• React handles the UI.
• Capacitor manages cross‑platform deployment.
• Supabase provides the backend.

Each library was selected to balance developer productivity, user experience, code quality, and the ability to ship across multiple platforms without maintaining separate codebases.

If you’re building a cross‑platform app or are curious about modern web architecture, this stack offers a solid, real‑world example.

ch to balancing performance, maintainability, and shipping to multiple platforms.

If you want to use a notes app which stands out from the crowd, check InkRows!

⭐ As always, if you enjoyed this content, feel free to follow me on X and LinkedIn for more updates, insights, and discussions!