# refine.new
## Hero Section
### Tagline
Enterprise application platform for serious frontend developers.
### Animation
#### Technology Logos
* Left Group
* React
* NextJS
* Remix
* Middle Group
* Material UI
* Ant Design
* Right Group
* Supabase
* Airtable
* Auth0
#### Output
Your application with enterprise-grade
* Tables
* Forms
* Networking
* State management
* Authentication
* Access Control
* i18n
## Wizard
#### Welcome
##### About refine
**refine** is an open source, React-based web application framework for rapid development. It's headless by design, thereby offering unlimited styling and customization options. [New to refine? Check out refine.dev for more information.](https://refine.dev)
##### Days long effort, ready in minutes.
**refine.new** lets you create a new **refine** application by making step-by-step selections directly in your browser. Your tailor-made refine project will be ready for instant preview and download, saving you hundreds of hours on development.
* Button: Let's start!
#### Step 1: Select your React Platform
* CRA
* info: Creates a [CRA](https://create-react-app.dev/) project, with Client Side Rendering (CSR) support.
* NextJS
* info: Creates a [NextJS](https://nextjs.org/) project, with Server-Side Rendering (SSR) support.
* Remix
* info: Creates a [Remix](https://remix.run/) project, with Server-Side Rendering (SSR) support.
#### Step 2: Select your UI Framework
* MUI
* info: Includes [Material UI](https://mui.com/) framework and refine integrations for DataGrid & react-hook-form.
* Ant Design
* info: Includes [Ant Design](https://ant.design/) framework and refine integrations for Table & AntD Form.
* Chakra UI
* info: Includes [Chakra UI](https://chakra-ui.com/) framework and refine integrations for TanStack Table (react-table) & react-hook-form.
* Mantine
* info: Includes [Mantine](https://mantine.dev/) framework and refine integrations TanStack Table (react-table) & Mantine Form.
* Headless
* info: Adds no UI Framework to the project. Includes integrations for TanStack Table (react-table) & react-hook-form. When using the headless mode, you have the freedom to use any custom design and manually integrate it with Refine.
#### Step 3: Select your Backend
* REST API
* info: Includes a data provider for consuming REST APIs.
* GraphQL
* info: Includes a data provider for consuming GraphQL APIs.
* Supabase
* info: Includes the [Supabase](https://supabase.com/) data provider.
* Strapi
* info: Includes the [Strapi](https://strapi.io/) data provider.
* NestJS CRUD
* info: Includes a data provider for consuming [NextJS CRUD](https://github.com/nestjsx/crud) APIs.
* Appwrite
* info: Includes the [Appwrite](https://appwrite.io/) data provider.
* Airtable
* info: Includes the [Airtable](https://airtable.com/) data provider.
* Hasura
* info: Includes the [Hasura](https://hasura.io/) data provider.
* Medusa
* info: Includes the [Medusa](https://medusajs.com/) data provider.
#### Step 4: Select your Auth. provider
* Google Auth.
* info: Adds [Google Authentication](https://developers.google.com/identity/protocols/oauth2) flow.
* Keycloak
* info: Adds [Keycloak](https://www.keycloak.org/) Authentication flow.
* Auth0
* info: Adds [Auth0](https://auth0.com/) Authentication flow.
* Strapi [visible if Strapi is selected on step 3, option selected by default, all other options are ghosted]
* info: Adds support for the built-in authentication flow provided by Strapi.
* Supabase [visible if Supabase is selected on step 3,option selected by default, all other options are ghosted]
* info: Adds support for the built-in authentication flow provided by Supabase.
* Medusa [visible if Medusa is selected on step 3, option selected by default, all other options are ghosted]
* info: Adds support for the built-in authentication flow provided by Medusa.
* NHost [visible if Medusa is selected on step 3, selected by default, all other options are ghosted]
* info: Adds support for the built-in authentication flow provided by Medusa.
#### Step 5: Customize your project
* Project name: (auto-generated default)
* Your logo:
* 6 ready-made logo options to select
* or (upload your own logo & preview)
* Theme:
* Button: "Build my Project"
#### Building your project
... Creating your refine project ✅
... Applying customizations ✅
... Installing dependencies ✅
... Loading sample data ✅
... Deploying the project for preview ✅
... Compressing the files ✅
READY!
* Button: "Preview"
#### You are almost done!
** [SELECTIONS]
On the next step, you'll get a preview of your refine application based on your selections.
#### Previewing your Project
* Button: "Build & Download"
#### Onboarding Modal
Before you proceed with building your project and accessing the download link, you are required to sign in with one of the following providers:
* Button: Sign-in with Github
* Button: Sign-in with Google
#### Onboarding Modal (Failed Auth)
We could not authenticate you. Please try again or use a different provider
* Button: Okay
#### Onboarding Modal () (Opt-in)
[ ] Keep me in the loop! Send me occasional emails for **updates and new releases**.
[ ] Sign me up for the **monthly newsletter** featuring a handpicked selection of the best articles and projects.
* Button: Okay
#### Download Modal - Step 1
* Setting up the React environment
* Creating your refine project
* Installing your UI Framework
* Installing your data provider
* Installing your auth. provider
* Compressing the files
#### Download Modal - Step 2
Your project is ready for download:
[URL] [Copy to clipboard button]
After the download is complete, extract the archive. Then, within the extracted folder, run the specified commands to launch your refine application:
```
> npm install
> npm run dev
```
Great job on creating your refine project! A curated list of resources based on your selections is available below, and they will guide you through the next steps.
##### Tutorial
[visible if MUI is selected on step 2]
* 👉 [Jump in to our refine + MUI tutorial](https://refine.dev/docs/tutorial/introduction/index/?ui-framework=mui) to start developing your first refine application.
[visible if AntD is selected on step 2]
* 👉 [Jump in to our refine + Ant Design tutorial](https://refine.dev/docs/tutorial/introduction/index/?ui-framework=antd) to start developing your first refine application.
[visible if Chakra UI is selected on step 2]
* 👉 [Jump in to our refine + Chakra UI tutorial](https://refine.dev/docs/tutorial/introduction/index/?ui-framework=chakraui) to start developing your first refine application.
[visible if Mantine is selected on step 2]
* 👉 [Jump in to our refine + Mantine tutorial](https://refine.dev/docs/tutorial/introduction/index/?ui-framework=mantine) to start developing your first refine application.
[visible if Headless is selected on step 2]
* 👉 [Jump in to our refine Headless tutorial](https://refine.dev/docs/tutorial/introduction/index/?ui-framework=headless) to start developing your first refine application.
##### SSR Examples
[visible if NextJS is selected on step 1]
* 👉 Since you have chosen NextJS as your React framework, you may be interested in checking out our additional [NextJS Tutorial ](https://refine.dev/docs/advanced-tutorials/ssr/nextjs/)
[visible if Remix is selected on step 1]
* 👉 Since you have chosen Remix as your React framework, you may be interested in checking out our additional [Remix Tutorial ](https://refine.dev/docs/advanced-tutorials/ssr/remix/)
##### Getting Help
* Join our [Discord server](https://discord.gg/refine) for direct assistance from the **refine** core team
##### Support Us ❤️
* Don't forget to visit our [ GitHub Pages](https://github.com/refinedev/refine) and give us a star ⭐️!
Sign in with Wallet
Connect another wallet