Discover how refine.new and the refine framework are transforming the way developers create front-end applications in the React.
Introduction
I would like to introduce our new open source browser tool - refine.new for creating refine apps and how its transforming the way developers create web applications in the React ecosystem.
Let's recap the refine architecture first 💙
As you know, refine is an open-source React-based framework designed to simplify and accelerate the development of web applications with SSR support with Next.js or Remix.
It is specifically tailored for data-intensive applications like admin panels, dashboards, and internal tools, but can also power customer-facing applications like storefronts and any type of CRUD apps.
It eliminates repetitive tasks in CRUD operations and provides industry-standard solutions for critical project components like authentication, access control, routing, networking, state management, and i18n.
The refine is headless by design, offering unlimited styling and customization options. Moreover, refine ships with ready-made integrations for Ant Design, Material UI, Mantine, and Chakra UI for convenience.
refine has connectors for 15+ backend services, including REST API, GraphQL, and popular services like Airtable, Strapi, Supabase, Firebase, and Directus
Refer to documentation for more info about refine =>
Step up to refine tutorials =>
✨ With the introduction of refine.new, developers can now create refine apps in just 15 seconds.
What is refine.new?
refine.new is an innovative browser-based tool that lets you create a new refine application in just 15 seconds by making step-by-step selections directly in your browser.
The tool allows you to create a wide range of project variations by selecting your desired
- React platform (Vite.js, Next.js or Remix),
- UI framework ( Ant Design, Material UI, Mantine, and Chakra UI, or headless UI option),
- Backend service (REST API, Supabase, Strapi, NestJs, Appwrite, or Airtable),
- Authentication provider (Google Auth, Keycloak, Auth0, Supabase, Appwrite, Strapi, custom auth).
Once you make your selections, refine.new creates a complete CRUD app tailored to your specifications in just 2 seconds.
The generated application comes with fully working authentication, CRUD operation components, and pages with fully functional code. You can change the theme color, logo, preview the app, and test CRUD actions and pages.
Considering the build step options provided by refine.new, there are numerous possible project variations. With three React platforms, five UI frameworks, six backend services, and eight authentication providers to choose from, you can create 720 different combinations, each tailored to your specific project needs.
You can download the complete project code and use as a starting point for your project.
💥 Yes, it's fully open source and free to use.
View the example refine app built using refine.new from this link.
Why do developers need refine?
refine and refine.new are game-changers in the React ecosystem, making it incredibly easy for developers to build complete CRUD applications in no time. Here's how these tools make developers' lives easier:
Time-saving and easy-to-use
refine.new allows developers to create complete applications with interactive UI in just 15 seconds, eliminating the need for complex configurations or setups. refine also offers a zero-config, one-minute setup with a single CLI command, making it easy to get started on projects quickly
Consistent and high-quality code
refine.new produce consistent, high-quality code that adheres to industry best practices. This helps maintain a high standard across projects and ensures that developers spend less time debugging and more time focusing on their application's core features.
Enterprise-grade applications
refine are designed for building large-scale projects, making it an ideal choice for developers who work on enterprise-grade applications. With full test coverage and a robust, future-proof architecture, you can trust that your application will be reliable and scalable.
Open-source and free
Both refine and refine.new are open-source and free, allowing developers to access and modify the complete code base as needed. This empowers developers to contribute to the project, learn from the source code, and create custom solutions tailored to their requirements.
Reduced development time
By automating repetitive tasks and providing built-in solutions for critical project components, refine and refine.new significantly reduce development time. This allows developers to focus on implementing unique features that set their application apart from the competition.
Conclusion
refine and refine.new are transforming the React.js ecosystem by making it easier than ever for developers to build high-quality, data-intensive applications in record time. With an extensive range of project variations, enterprise-grade features, and a streamlined development process, these tools are poised to become the go-to choice for developers working on CRUD applications in the React.js ecosystem.
Experience the power of refine and refine.new for yourself and see how they can revolutionize your development process!
Top comments (20)
Refine.new design is just beautiful!
Thanks for great feedback!
Thanks for your nice words. 🍻
wow, the UI looks really nice. Is it possible to publish the project from inside the browser tool?
Not yet:) However you can download the complete project code and deploy on your own.
Check this guide: refine.dev/docs/tutorial/getting-s...
I see. Would have been nice to have. Is it hard to implement such a feature? Maybe publish the project on Vercel.
We'll have new features related to it very soon. Follow us on twitter: twitter.com/refine_dev
I just want to try it out now , I'll give you guys feedback
Great, looking forward to it!
Hey guys, I just tried it out now and it's really good. However, I'm curious about how the data will be secured and controlled by me with the authentication you implemented in the project.
By using the 'build & download' feature, you can download the project to your own computer and deploy it.
This tool only facilitates project creation. You can read our tutorial at refine.dev/docs/tutorial/introduct... for more information.
The design looks amazing. Gave it a try myself. Nice work!
I tried this now and chose next.js as my platform, but I noticed the current stable app folder structure is not the structure.
Nice work!
I’m running into, how to customize the main page, without loosing the dashboard.
I want to use it for a CMS,
But where do I differentiate the front page/ admin page?
No Tailwind CSS / UI??
Planning to add that very soon, it's on the backlog!
Thanks for this content. I'm trying to use refine. When I make a npm install was funded 3 vulnerability. Maybe is dangerous? In production do I have any risk?
refine.new experience is very smooth. Congratulations, team!
Exactly!