DEV Community

Cover image for ⚡refine.new - Introducing the Fastest Way to Create React Apps
Necati Özmen for Refine

Posted on • Updated on • Originally published at refine.dev

⚡refine.new - Introducing the Fastest Way to Create React Apps

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.



refine banner

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.



refine banner

The tool allows you to create a wide range of project variations by selecting your desired

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.



tutorial antd

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)

Collapse
 
nevodavid profile image
Nevo David

Refine.new design is just beautiful!

Collapse
 
necatiozmen profile image
Necati Özmen

Thanks for great feedback!

Collapse
 
piyerro profile image
Eren Erkalkan

Thanks for your nice words. 🍻

Collapse
 
_eduard26 profile image
Eduard Constantin

wow, the UI looks really nice. Is it possible to publish the project from inside the browser tool?

Collapse
 
necatiozmen profile image
Necati Özmen

Not yet:) However you can download the complete project code and deploy on your own.
Check this guide: refine.dev/docs/tutorial/getting-s...

Collapse
 
_eduard26 profile image
Eduard Constantin

I see. Would have been nice to have. Is it hard to implement such a feature? Maybe publish the project on Vercel.

Thread Thread
 
necatiozmen profile image
Necati Özmen

We'll have new features related to it very soon. Follow us on twitter: twitter.com/refine_dev

Collapse
 
benlad_1 profile image
Benlad

I just want to try it out now , I'll give you guys feedback

Collapse
 
necatiozmen profile image
Necati Özmen

Great, looking forward to it!

Collapse
 
benlad_1 profile image
Benlad

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.

Thread Thread
 
necatiozmen profile image
Necati Özmen

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.

Collapse
 
karaca19 profile image
Bora Karaca

The design looks amazing. Gave it a try myself. Nice work!

Collapse
 
femi_akinyemi profile image
Femi Akinyemi

I tried this now and chose next.js as my platform, but I noticed the current stable app folder structure is not the structure.

Collapse
 
ceturc profile image
ceturc

Nice work!

Collapse
 
justcode_27 profile image
Bret emm

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?

Collapse
 
omills profile image
Olivier

No Tailwind CSS / UI??

Collapse
 
necatiozmen profile image
Necati Özmen

Planning to add that very soon, it's on the backlog!

Collapse
 
davidecfranca profile image
David França

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?

Collapse
 
omeraplak profile image
Omer Aplak

refine.new experience is very smooth. Congratulations, team!

Collapse
 
necatiozmen profile image
Necati Özmen

Exactly!