Creating a Vite, Mui and Supabase based CRUD application with refine.dev in under 8 minutes.

Creating a Vite, Mui and Supabase based CRUD application with refine.dev in under 8 minutes.

Hey folks! Today, I'm thrilled to introduce you to a way of getting your next CRUD app up and running in minutes using refine.dev This amazing project has become a personal favourite of mine, and I've had the pleasure of using it extensively for my work.

Its incredible power has truly impressed me. But wait, there's more! 😂 They've just released a new project called refine.new, which allows you to create a project effortlessly using a list of customizable settings.

With refine.new, you can easily select your preferred platform from options like Vite, Remix, or Next.js. And when it comes to styling, you're spoiled for choice with Material-UI, Chakra UI, Mantine, or even headless styles. As for the backend, you have a wide range of options including your own REST-API, your own GraphQL api, Appwrite, Supabase, Strapi, and many more.

In this example for the backend, I'm using Supabase which is a highly regarded alternative to Firebase and is most definitely worth investing some time into learning as it also supports vector databases for all your upcoming AI projects.

You can check out the Supabase docs here, and this freeCodeCamp tutorial here as a starting point as well.

Once you've made your selections, simply click the "Build" button, and voila! Refine will generate a fully functional project for you. It's as easy as running an "npm install" command in VS Code, except this time, you're all set with a ready-to-go app.

So today I'm going to take you through creating our app using refine .new and see how quickly we can get this thing up and running.

Start: 12:30pm

Hit the refine.new link here

Click "let's start"

I'm going with Vite, Mui, and Supabase (as above because they have support for vector databases) combo.

then

now

almost done in 4 clicks

Add a title and colour if you like, and click "Build and Download"

you get a URL, and some links to the documentation and the discord

open in VSCode and install the packages as directed then run and in literally under 8 minutes I'm up and running.

Hit the login and it's already got some dummy data to show you how to get started.

Finish: 12:37pm

Refine is super powerful and is constantly adding new features. The team are very friendly and helpful on the discord and the community is very beginner friendly.

I'm looking forward to creating some AI-assisted examples in some upcoming posts with Langchainjs and Supabase.

You can see the repo here https://github.com/BenGardiner123/hashnode-example

You can check out the refine.dev project here, their GitHub here and their Discord here

The React Material-UI library here and Supabase here.

Happy Coding!

Did you find this article valuable?

Support Ben Gardiner by becoming a sponsor. Any amount is appreciated!