Skip to main content

Quick Start

Get a full CRUD interface up and running in minutes. This guide walks you through setting up a complete admin dashboard for an e-commerce store using Strato Admin's schema-first architecture. By defining your data schema once, you can automatically generate list, create, and edit views for your products.

1. Create your App​

Strato Admin is a React-based framework. You can use it in any React project.

import React from 'react';
import { Admin, ResourceSchema, TextField, CurrencyField, ReferenceField, IdField } from '@strato-admin/admin';
import { dataProvider } from '@strato-admin/faker-ecommerce';

export const QuickStartApp = () => (
  <Admin dataProvider={dataProvider} title="Strato Admin Quickstart">
    <ResourceSchema name="products">
      <IdField source="id" />
      <TextField source="name" isRequired link="detail" />
      <CurrencyField source="price" currency="EUR" />
      <ReferenceField source="category_id" reference="categories" />
    </ResourceSchema>

    <ResourceSchema name="categories">
      <IdField source="id" />
      <TextField source="name" link="detail" isRequired />
    </ResourceSchema>
  </Admin>
);

With this single file, you get a fully functional admin for "products" that can list, create, and edit records, complete with a professional-looking UI. Notice we also added a <ResourceSchema name="categories" /> to satisfy the <ReferenceField>.

2. Key Concepts​

<ResourceSchema>​

The core of the schema-first approach. This component is a powerful wrapper around React Admin's <Resource>. By passing it a fieldSchema and an inputSchema, you enable it to automatically render the views for list, create, edit, and detail without you needing to build those components manually.

Automatic View Generation​

When you provide schemas to <ResourceSchema>, it uses its default list, create, edit, and detail components. These default components are schema-aware - they know how to read the schemas you've provided for the resource and render the appropriate fields or inputs.

3. Next Steps​