DEV Community: Filip Frincu

The tech stack behind InkRows

Filip Frincu — Tue, 06 Jan 2026 08:01:32 +0000

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

🛡️ 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

🚀 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!

The need to create my own productivity app

Filip Frincu — Fri, 02 Jan 2026 22:07:15 +0000

For years, I've been on a quest to find the ultimate tool to organize my life. My journey led me through a landscape of productivity apps, with Notion and Google Keep being my most frequent companions.

🌍 The best of both worlds, but not quite

I relied on Google Keep for quick notes and simple to-do lists, while Notion handled my more complex, large scale projects. However, both had their limitations. Keep's basic toolbar and lack of text formatting options eventually made it feel incomplete. I found myself sticking with Notion, but it wasn't ideal for rapid note-taking. The loading times could be frustratingly slow, making the entire experience feel sluggish.

🔒 Security concerns and the desire for more

A significant concern for me was the lack of encryption in both Keep and Notion. This meant I was hesitant to jot down any sensitive or personal information, which is a crucial part of a truly comprehensive personal organizer.

What I truly craved was an app that was:

Fast and responsive: No waiting around for notes to load.
Secure: End-to-end encryption for peace of mind.
Synchronized: Seamless access across all my devices.
Modern and intuitive: An easy-to-use interface.
Powerful editor: A customizable note editor that supports features like Markdown, text highlighting, and underlining.

Neither Notion nor Keep could tick all these boxes, and that's precisely why I decided to create my own app: InkRows.

🛠️ Building InkRows: a blend of simplicity and power

My extensive use of Google Keep provided a strong foundation for InkRows. I loved the instant note creation, the central location for all my thoughts, and the organizational power of tags.

I began enhancing InkRows by incorporating the features I missed in Keep. This included:

Robust encryption: Ensuring your notes are private and secure.
Advanced organization: Adding folder structures for more detailed organization.
A powerful editor: Supporting Markdown, as well as the ability to underline and color text.

Every element of InkRows is customizable, including the toolbar, ensuring a clean and uncluttered user experience.

✅ Making your to-dos easier and getting more done

I also developed a dedicated section for to-dos, allowing users to filter them by due date and priority. To tie everything together, a home screen provides a quick overview of your tasks and shortcuts for immediate note or to-do creation.

In essence, this is InkRows. Over the next few days, I'll be diving deeper into specific features and demonstrating how InkRows can help you achieve peak productivity.

If you're looking for a faster, more secure, and more feature-rich note-taking experience, I encourage you to give InkRows a try today! 🚀

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

NextUI Theme Generator

Filip Frincu — Wed, 05 Jun 2024 11:44:41 +0000

I've been using NextUI for quite some time, but I missed having a theme generator like other component libraries have.

So, I decided to create my own: NextUI Theme Gen. Feel free to give it a try.

If you like it, don't forget to leave a star on GitHub. Thanks!

GroupUp Unveiled: Supabase as Backend

Filip Frincu — Fri, 29 Mar 2024 08:01:37 +0000

This post is part of a series explaining how I built GroupUp, an app that helps organize events, trips, gatherings, and more. Check out my first blog post to see the motivation behind this series here.

├─ ❓ What is Supabase?
├─ 📃 Why Supabase?
├     ├─ 🔶 Documentation
├     ├─ 🔶 Authentication
├     ├─ 🔶 Authorization via Row-Level Security
├     ├─ 🔶 Realtime Updates
├     ├─ 🔶 Storage
├     ├─ 🔶 Edge Functions
├     ├─ 🔶 Pricing
├     ├─ 🔶 Other
├─ 💬 Conclusion
└─ ⏭️ What's Next

This entire post will be dedicated to Supabase, the backend behind GroupUp.

❓ What is Supabase?

The Supabase website describes it perfectly: "An open-source Firebase alternative. Start your project with a Postgres database, Authentication, instant APIs, Edge Functions, Realtime subscriptions, Storage, and Vector embeddings."

Supabase offers a Postgres database, user authentication, serverless functions, real-time functionality, storage, and even AI capabilities (vector embeddings) – all with the freedom of open source.

📃 Why Supabase?

When I started building GroupUp, Firebase was my first pick. It was familiar, easy to set up, backed by Google, and widely used. But then came vendor lock-in. With Supabase, you can host your own instance, escaping the clutches of any cloud provider.

Another key factor was the database. Firebase uses Firestore, a NoSQL database, while Supabase utilizes the powerful and popular open-source SQL database, Postgres.

Supabase might have been the "new kid on the block" back then, but I saw its potential. While some features were missing (or in alpha) during my initial use, like real-time, edge functions, and AI, it provided what I needed: seamless authentication, a database for data storage, storage for images, and an automatic API for data fetching.

Migrating from Firebase in the early stages was easy. Just a few code changes and table creations, and I was good to go.

🔶 Documentation

Great documentation is a must-have, and Supabase delivers. It's easy to find what you need, and some resources even come with video tutorials. You can find the Supabase docs here.

🔶 Authentication

Most apps require authentication, and GroupUp is no exception. Supabase's authentication is straight forward. I opted for email/password (captcha protection is available if you need it) and Google Sign In.

Setting up email/password logic on Supabase was smooth, but the frontend took more time to solidify. Implementing signup, login, forgot password, password change, and email change took a significant chunk of time. Looking back, I might have over-engineered it. Remember, it's okay to start simple and improve later based on actual usage.

Today, provider-based logins like Google Sign In are incredibly popular and easy to set up with Supabase. Their docs are fantastic, and they support a wide range of providers. Authentication docs here.

🔶 Authorization via Row-Level Security

Keeping user data safe requires control over read, write, update, and delete operations. Supabase leverages Postgres's Row Level Security (RLS) for authorization. You can write simple or complex SQL rules to manage user access to data. Read more here.

🔶 Realtime Updates

Initially, I relied solely on API requests to fetch groups, events, users, votes, car availability, and so on. This led to frequent requests on every route change and potentially stale data. Supabase's real-time capabilities came to the rescue. While it added some frontend complexity, it provided a much better user experience with instant feedback. Realtime docs here.

🔶 Storage

Since users can add profile images for groups and themselves, I needed storage. Supabase provides this with built-in RLS for user access control. It even offers image optimization and transformation on the fly to save storage space, but this is a Pro plan feature.

For the free plan, you can build your own logic or use external packages to resize images on the client-side or with an edge function. Storage docs here.

🔶 Edge Functions

Edge functions are essential for operations like fetching weather data for an event or sending push notifications to users. You can access the database from the function using the permissions of the invoking user, or bypass all permissions with service_role key.

To invoke the functions, you can directly call them from the client-side, or they can be triggered by database events like insert, update, or delete. Edge functions docs here.

🔶 Pricing

You get 2 free projects with generous limits, perfect for getting started. Free projects are paused after 1 week of inactivity, but this shouldn't be an issue for development or even low-traffic production use. Pricing details here.

🔶 Other

Supabase offers a rich developer experience: SQL editor, logs, reports, data viewer, database view, and a tables editor (with user impersonation). These features are invaluable for development, debugging, and performance analysis.

Another cool feature is the ability to use PostgreSQL extensions like pg_jsonschema for validating JSON data in table columns, or uuid-ossp for generating unique identifiers.

💬 Conclusion

I'm happy with my choice. Supabase is now my go-to backend solution. It has saved me significant time with features like Authentication, Realtime, and Edge Functions, allowing me to focus on core app functionality.

⏭️ What's Next

In the next blog, I'll be diving into the folder structure of my React client app. Stay tuned!

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

GroupUp Unveiled: Frontend Tech Stack

Filip Frincu — Sat, 23 Mar 2024 08:12:10 +0000

This post is part of a series explaining how I built GroupUp, an app that helps organize events, trips, gatherings, and more. Check out my first blog post to see the motivation behind this series here.

├─ 🎨 Frontend
├       ├─ 🔶 React
├       ├─ 🔶 Typescript
├       ├─ 🔶 Eslint
├       ├─ 🔶 Prettier
├       ├─ 🔶 Vite
├       └─ 🔶 Jest
├─ ➕ Other
└─ ⏭️ What's next

Since choosing a tech stack can be tricky, I've split this topic into two parts: frontend and backend technologies used in GroupUp. There are tons of options (almost endless in web development), and while migration is possible later, it's usually time-consuming and not always fun.

🎨 Frontend

For now I will just mention the technologies used in the frontend development process. I may go into more detail about each technology in future posts.

🔶 React - The Library for Web and Native User Interfaces

I started GroupUp nearly three years ago. Back then, the three major web frameworks were Angular, React, and Vue. They're likely still the most popular, but there are many more options today (as you may know, a new day means a new frontend framework 😅).

Initially, I learned Angular, but as a web development newbie, I found it quite challenging. A friend suggested React, and it felt more natural for me at that time (it wasn't as reliant on complex framework magic like hooks are now). This freedom allowed me more control, but as an inexperienced developer, it also led to some chaotic code.

Today, I appreciate Angular's structured approach. I might use it someday, but for now, I'm sticking with React.

While migrating frameworks can be a lot of work, the good news is that well-maintained and widely adopted frameworks like these shouldn't cause major roadblocks down the line.

🔶 TypeScript - JavaScript with Syntax for Types

Using TypeScript involves learning some extra JavaScript, but for larger projects (like GroupUp!), it's a lifesaver. Complex logic without clear data types can quickly become a nightmare. TypeScript also helps prevent bugs that might otherwise take time to debug.

However, avoid overcomplicating things. I've gotten frustrated wasting time on overly complex types instead of writing actual application code.

JSDoc is another option. It requires more writing, but doesn't need a compiler like TypeScript. Recently, some developers have questioned TypeScript's necessity, but it works well for me, and I'll stick with it for now. For smaller projects, I'd recommend trying JSDoc.

🔶 Eslint - Find and Fix Problems in Your JavaScript Code

I highly recommend Eslint for finding and fixing code issues. If you use an editor like VS Code, you can install the Eslint extension to highlight issues in real time.

Many Eslint plugins are available, so you don't need to configure everything from scratch. Using Eslint also promotes consistent coding style.

I've set up a pre-commit hook that runs Eslint before every Git commit, ensuring the code pushed to the repository adheres to the rules defined in my Eslint configuration file.

🔶 Prettier - Opinionated Code Formatter

Prettier ensures your code is well-formatted, saving you time on adding/removing spaces, maintaining consistent line widths, and so on.

Similar to Eslint, you can install Prettier as a VS Code extension for live formatting. You can also run it through a pre-commit hook to guarantee well-formatted code before pushing to the remote repository.

🔶 Vite - Next Generation Frontend Tooling

Vite stole my heart from the start. Before Vite, the standard way to create a React app was with Create React App (CRA) , which is no longer recommended or supported. While I generally dislike changing things that work, CRA's slow development server was a constant source of frustration.

When Vite came out, I knew I had to try it. Migrating from CRA to Vite wasn't too painful (there are many tutorials available), and the benefits were huge. My development server now starts in under two seconds, and there are many plugins to support various functionalities (like setting up a Progressive Web App quickly).

Here's the fixed and improved text, keeping the casual tone:

🔶 Jest - Delightful JavaScript Testing Framework

I started using Jest with React Testing Library for my components. It came bundled with Create React App (CRA), so I didn't explore other options. While Jest works, I've come across Vitest, which seems like a strong contender.

Vitest integrates seamlessly with Vite, requires less configuration, and supports the modern standard, ECMAScript Modules (ESM) (more on Module Types here)

When I switched from CRA to Vite, I attempted a Jest-to-Vitest migration. However, I ran into errors due to my existing Jest test base covering various scenarios. So, I decided to hold off for now.

Migrating to Vitest remains on my radar, but Jest is handling things for now.

➕ Other

To achieve different functionalities, I've also used various libraries and tools, such as: OneSignal for push notifications, Capacitor for mobile app development, Sentry for error tracking, but I'll delve into these in future posts.

⏭️ What's Next?

In the next post, I'll goe into the backend of GroupUp, which is built with Supabase, an open source Firebase alternative. I'll also discuss the reasons behind choosing Supabase and how it's been working out so far. Stay tuned!

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

Developing GroupUp Journey

Filip Frincu — Sat, 16 Mar 2024 16:17:32 +0000

👦🏻 Some info about me
⏳ How GroupUp started
🗺️ What will this series be about
⏭️ What's next

In my first ever blog post, I've decided to share my journey developing GroupUp, an app that aims to make organizing gatherings easier and more fun. I'll be diving into the technical aspects and explaining the logic behind them.

On a side note, I've also embarked on a journey to improve my typing skills, so hopefully, writing these blogs will be a good practice exercise.

👦🏻 Some info about me

I started my career as a migration engineer about six years ago. Then, I migrated (pun intended 😅) to web development, and ever since, I've focused on creating things that (I hope) bring value.

Being a father of two definitely throws some curveballs my way sometimes, but there's nothing quite like the joy of fatherhood.

⏳ How GroupUp started

A few years back, my friends and I used to have regular movie nights. Deciding on a movie was always a struggle, so I created my first React app, MoviePoll, to help us pick the next one.

While movie nights eventually faded away, we kept exploring other activities like hiking and camping. We used WhatsApp to coordinate, but you probably know the struggle with spam in WhatsApp groups – it wasn't ideal for planning anything.

That's what sparked the development of GroupUp. Integrating features like transportation coordination, location sharing, weather forecasts, and a simple RSVP system made organizing our get-togethers so much smoother.

You can find more info on the About page.

🗺️ What will this series be about

I'd love to share how I achieved different functionalities in the app. I'm no web development guru, and I'm always open to learning and improving, so feel free to leave your feedback in the comments!

Here's the tech stack I used to build the app:

React: JavaScript library for the frontend
CapacitorJS: Enables building for both Android and iOS
OneSignal: Handles notifications
Supabase: Powers authentication, storage and the database
Vite: Frontend tooling

Feel free to check out the app, and if there's a specific feature you'd like me to cover in a future post, let me know!

⏭️ What's next

In the next blog post, I'll be diving deeper into the reasons behind my choice of tech stack – stay tuned!

⭐ If you enjoyed this content, feel free to follow me on Twitter and LinkedIn for more updates, insights, and discussions!

DEV Community: Filip Frincu

The tech stack behind InkRows

⚛️ Frontend: React 19 with TypeScript

🏗️ Build System: Vite 7 with SWC

📱 Cross-Platform Mobile: Capacitor 8

🎨 Styling: Tailwind CSS 4 with PostCSS

🧠 State Management: Zustand

✍️ Rich Text Editing: Lexical

💾 Data Persistence: Multiple Layers

☁️ Backend: Supabase

🏠 Local Storage: Dexie

🔍 Data Querying: TanStack Query

💰 Monetization: Stripe Integration

🧩 UI Component Library: HeroUI

✨ Animation & Interaction

📊 Analytics & Feedback

🌐 Progressive Web App (PWA)

🏛️ Architecture Highlights

📦 Modular Organization

🛡️ Type Safety

🛠️ Development Experience

🚀 Deployment

🏁 Conclusion

The need to create my own productivity app

🌍 The best of both worlds, but not quite

🔒 Security concerns and the desire for more

🛠️ Building InkRows: a blend of simplicity and power

✅ Making your to-dos easier and getting more done

NextUI Theme Generator

GroupUp Unveiled: Supabase as Backend

Table of Contents

❓ What is Supabase?

📃 Why Supabase?

🔶 Documentation

🔶 Authentication

🔶 Authorization via Row-Level Security

🔶 Realtime Updates

🔶 Storage

🔶 Edge Functions

🔶 Pricing

🔶 Other

💬 Conclusion

⏭️ What's Next

GroupUp Unveiled: Frontend Tech Stack

Table of Contents

🎨 Frontend

🔶 React - The Library for Web and Native User Interfaces

🔶 TypeScript - JavaScript with Syntax for Types

🔶 Eslint - Find and Fix Problems in Your JavaScript Code

🔶 Prettier - Opinionated Code Formatter

🔶 Vite - Next Generation Frontend Tooling

🔶 Jest - Delightful JavaScript Testing Framework

➕ Other

⏭️ What's Next?

Developing GroupUp Journey

Table of contents

👦🏻 Some info about me

⏳ How GroupUp started

🗺️ What will this series be about

⏭️ What's next