DEV Community

Cover image for The tech stack behind InkRows
Filip Frincu
Filip Frincu

Posted on • Originally published at inkrows.com

The tech stack behind InkRows

#javascript #react #productivity #development

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

⚛️ Frontend: React 19 with TypeScript

At the core of InkRows is React, paired with TypeScript. I find typescript really usefull when the project grows or when a refactoring is taking place or a package gets updated. Regarding react, well, I think you already know what it does.

🏗️ Build System: Vite 7 with SWC

Vite made a huge difference in development speed. The instant server startup and hot module replacement are snappy, and build times are fast. For transpilation, I use SWC instead of Babel, which keeps things even faster.

📱 Cross-Platform Mobile: Capacitor 8

Capacitor handles the cross-platform piece. I write the app once in React/TypeScript and deploy to web, iOS, and Android without maintaining separate codebases. It bridges web and native APIs through plugins, so I can access native features like the camera and system functionality when needed.

🎨 Styling: Tailwind CSS 4 with PostCSS

Tailwind CSS keeps styling consistent and fast. The utility-first approach means I don't waste time naming classes or managing CSS organization. With the Vite integration and PostCSS transformations, the build stays lean.

🧠 State Management: Zustand

Zustand handles state management without the Redux boilerplate. The store is organized into slices (userSlice, todosSlice, tagsSlice, settingsSlice) which keeps state mutations predictable and testable.

✍️ Rich Text Editing: Lexical

Lexical powers the note editor. It's built by Meta and performs well compared to older ContentEditable-based editors. The plugin system makes it easy to extend with custom formatting and table support and actually anything you have in mind. The guys at Meta did a really great job.

💾 Data Persistence: Multiple Layers

InkRows has a mores complex persistence strategy:

☁️ Backend: Supabase

Supabase handles the backend with PostgreSQL, authentication, Edge Functions, and S3 file storage. Real-time subscriptions keep data synced across clients.

🏠 Local Storage: Dexie

For offline support, I use Dexie, an IndexedDB wrapper that persists data locally and syncs with Supabase when online. This enables optimistic UI updates and a snappy experience even without a connection.

🔍 Data Querying: TanStack Query

TanStack Query handles server state caching and synchronization. Background refetching keeps data fresh, and optimistic updates make the UI feel responsive.

💰 Monetization: Stripe Integration

Stripe powers the payments. Supabase Edge Functions handle webhook validation and subscription management.

🧩 UI Component Library: HeroUI

HeroUI provides accessible, pre-built components that work well with Tailwind CSS. So far, I think this is one of the best UI libraries so make sure you check it out.

✨ Animation & Interaction

Framer Motion handles animations and gestures smoothly. dnd-kit provides accessible drag-and-drop for list sorting and other interactions.

📊 Analytics & Feedback

PostHog tracks product analytics, and a Supabase function handle custom feedback collection.

🌐 Progressive Web App (PWA)

InkRows works offline as a PWA with:

  • Service Worker for offline functionality
  • App manifest for installable experience
  • Workbox for advanced caching strategies

🏛️ Architecture Highlights

📦 Modular Organization

The codebase is organized by feature:

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

🛡️ Type Safety

With TypeScript and skipLibCheck: false, I ensure:

  • End-to-end type safety
  • Auto-generated Supabase types
  • Props validation and better IDE support

🛠️ Development Experience

The development setup includes:

  • Fast HMR with Vite's native ES modules
  • Multiple build configurations for web, iOS, and Android
  • Live reload support for mobile development
  • Environment variable management via Vite's 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
Enter fullscreen mode Exit fullscreen mode

🚀 Deployment

InkRows deploys as:

  • Web: Static site hosting (Netlify)
  • iOS: TestFlight and App Store via Xcode
  • Android: Google Play Store via gradle builds

🏁 Conclusion

The tech stack reflects practical choices made during development. React handles the UI, Capacitor manages cross-platform deployment, and Supabase provides the backend. Each library was chosen 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 curious about modern web architecture, this stack shows one approach 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!

Top comments (0)