DEV Community: Ionut-Cristian Florescu

Looking forward to adding Algolia's DOCSEARCH to Mantine DataTable

Ionut-Cristian Florescu — Thu, 15 Jun 2023 14:44:00 +0000

It's been almost 10 months since my first commit to the Mantine DataTable project. Back then, I had no idea it was to become one of the most used data table components in the Mantine UI community.

I discovered Mantine after a few years of working with various React UI libraries such as MUI, Blueprint.js and Ant Design, and I immediately fell in love with it. But I was missing the rich data-table functionality, so instead of re-creating it in each project, I thought I should publish it as an open-source package so other people in the community would benefit from it.

The documentation website is probably one of the things that led to its adoption by the community. Since the React component is exclusively built with Mantine primitives and doesn't rely on heavy external dependencies such as React Table, I thought I should design and build its website to look and function similarly with Mantine's docs, so users would feel right at home when browsing it and learning how to use the component by studying the interactive examples.

I am now faced with a challenge, though. I initially envisioned the docs as an example-led journey that will explain and showcase the features, so I ended up having quite a lot of content - around 30 pages.

While this is still extraordinary and mush appreciated by both newcomers and veteran users alike, we're kind of missing a smart search piece of functionality.

That's why I recently applied for Algolia's DOCSEARCH - they are kind enough to offer their powerful solution for free to open-source projects.

The application process is rumored to take around 2 weeks, but hopefully everything will be fine and my project will be approved soon.

Thank you all for using Mantine DataTable and starring the GitHub repo!

PocketBaseUML

Ionut-Cristian Florescu — Fri, 17 Mar 2023 21:40:00 +0000

"The PocketBase visual perspective"

If you think PocketBase is one of the coolest open-source back-end solutions out there, you might want to have a look at PocketBaseUML — a free, open-source UML diagram generator/viewer that enables you to visualize your database architecture in a graphical form, easy to parse and understand in a quick glance.

PocketBase already comes with a fantastic UI (better than Supabase or Firebase, IMO), but I've always missed the ability to actually SEE the the collections and the references between them.

You can use the app online at pocketbase-uml.github.io to connect to any HTTPS PocketBase server, or you can run it as an npm package on your machine if you want to connect to a local PocketBase instance through HTTP, like so:

npx pocketbase-uml@latest

If you don't want to connect the app directly to a server, you can simply import a collections.json file exported from ypur PocketBase server to view it as an UML diagram.

The project is still in its early stage, there are new potential features to be added and I'll do my best to keep it in sync with new upcoming PocketBase features.

So, go on, have a look at it, give it a whirl and let me know in the comments if you find it interesting!

Also, if you find it interesting and/or you'd like to see new features added to it, don't hesitate to sponsor my work on GitHub or drop me a line to hire my services :-)

PocketBaseUML is not my only open-source project; I'm also the author of Mantine DataTable, tRPC-SvelteKit, Expose-WSL and a few others. Dedicating time to build and maintain high-quality open-source projects requires a lot of time and energy, and your generosity would help a lot.

Thank you for taking the time to read and for your support!

Expose-WSL

Ionut-Cristian Florescu — Tue, 13 Dec 2022 17:44:18 +0000

Probably the simplest way to expose apps running on WSL to local network devices

No installation required.
Simply run this before starting your apps:

npx expose-wsl@latest

Why I built it?

WSL provides a great environment for web developers working on Windows.

However, it's not always easy to access the applications running in WSL from the local network.

Whether you're working on a web app, a React-Native application, REST API, or have a database residing in a Docker container, you'll need to access it from a real mobile phone or simply from a different device.

While there are ways to achieve this, they are not always easy to implement.

Some of them require tackling with an NIC Bridge mode or manually downloading and applying a WSLHostPatcher.

Which are things you probably don't want to deal with when you're just trying to get your work done.

Here's where Expose-WSL comes into play.

How does it work?

Expose-WSL uses the excellent WSLHostPatcher built by CzBiX.

It automates the process of downloading the WSLHostPatcher release, decompressing the binary, running it to patch your WSL, and running a PowerShell script to display the IP address of your machine.

Supporting the project

If you find this tool useful, please 🙏star the repo spread the word, and consider ❤️ sponsoring my work.

I'm the author and maintainer of several open-source projects such as Mantine DataTable and tRPC-SvelteKit, and your support will help me keep them up-to-date and bug-free.
I might also be available for hire. If you need help with your project, feel free to contact me at the email address listed on my GitHub profile.

tRPC-SvelteKit v3 supports tRPC v10 🎉

Ionut-Cristian Florescu — Wed, 30 Nov 2022 15:59:00 +0000

It's been 10 months since I released the initial version of tRPC-SvelteKit, an adapter enabling TypeScript developers to build and consume type-safe APIs in SvelteKit applications.

I'm happy to announce that v3 works with tRPC v10 and comes with a nice documentation website:

icflorescu.github.io/trpc-sveltekit

The documentation website showcases how you could use tRPC procedures in SvelteKit's page load / page server load functions and how you could implement cookie-based authentication.

Have a look at it and please star the project repo if you find it useful.

Also, if you're looking to hire the services of a seasoned front-end/full-stack React and/or Svelte developer, have a look at my GitHub profile and don't hesitate to drop me a line at the email address you'll find in there.

Introducing Mantine DataTable

Ionut-Cristian Florescu — Thu, 15 Sep 2022 17:04:03 +0000

Mantine DataTable brings datagrid-like functionality to your data-rich user interfaces.

I've been working for a while with Mantine.dev and I believe that, at the moment, it is one of the best React UI frameworks out there. But it was missing a very useful functionality, which many people in the community kept asking about, and that was a data-table/data-grid component. So, being a keen supporter of open-source and the idea that we each should contribute to the development of beautiful, useful projects, I decided to build Mantine DataTable and release it under MIT license.

The entire codebase is written in TypeScript, component properties are well typed and documented with JSDoc, so you can build type safe applications with confidence. The component supports asynchronous data loading, pagination, multiple rows selection, column sorting, custom cell data rendering, row context menu, global application dark theme, and more.

Head over to the project's website for a quick start and to learn how to use it and configure it for various scenarios by browsing through the comprehensive list of examples.

Also, if you find the project useful, it would help a lot if you could star the GitHub repository, spread the word or hire my services to build front-end/full-stack stuff.

Use tRPC in your SvelteKit applications

Ionut-Cristian Florescu — Mon, 21 Feb 2022 18:34:06 +0000

Hi everyone! I'm mostly a React developer, but lately Svelte managed to really capture my attention. I've been playing around with it for a bit, and was simply astonished by how easy one can achieve things with far fewer lines of code than with React. On the other hand, I was a bit put-off by the (yet-) lack of tools in the ecosystem. One such tool was the ability to write & use typesafe APIs without the friction of REST or GraphQL... Such as we do in React-land with tRPC.

Hence trpc-sveltekit, my humble contribution to the Svelte ecosystem.

Simply install the package in your SvelteKit application with:

npm i trpc-sveltekit

yarn add trpc-sveltekit

...then make sure to add this to src/hooks.ts:

// src/hooks.ts
import { createTRPCHandle } from 'trpc-sveltekit';
// create your tRPC router...

export const handle = createTRPCHandle({ url: '/trpc', router });

Head over to the GitHub repo to learn how to set it up with Prisma and superjson and see a full example on CodeSandbox.

Though basic functionality is stable and working, the package is still WIP, so PRs are more than welcome! And please, don't hesitate to star the repo; it helps a lot ;-)