📄️ Tutorial
A step-by-step guide to building a professional e-commerce administration dashboard with StratoAdmin.
📄️ Introduction & Project Setup
In this chapter, we will set up our development environment and bootstrap the "StratoShop" admin dashboard. By the end of this section, you will have a running React application connected to a mock e-commerce backend.
📄️ Building Your First Resource
The fastest way to build with Strato Admin is the Schema-First paradigm. Instead of building separate components for Lists, Forms, and Detail views, you define your data model once using ``.
📄️ Refining Field Labels
By default, Strato Admin derives labels from your resource and field names. A resource named products will be labeled "Products" in the menu, and a field with source="price" will be labeled "Price" in tables and forms.
📄️ Relationships: Connecting Resources
In administrative applications, data is often interconnected. Products belong to categories, and in this chapter, we will connect our "Products" resource to a new "Categories" resource.
📄️ Optimizing List Views
In the previous chapters, we saw how Strato Admin automatically generates a list view for our resources. In this chapter, we will learn how to customize this view while staying within the Schema-First paradigm.
📄️ Enhancing Form Inputs
In previous chapters, we optimized our list view. Now, we will learn how to customize the Create Form and Edit Form that Strato Admin generates for us. We will explore how to use different input components to improve the data entry experience.
📄️ The App Shell & Branding
Our StratoShop admin is functional, but it still looks like a generic dashboard. In this chapter, we will customize the App Shell — the persistent outer frame of the application — to match our brand.
📄️ Authentication & Role-Based Access
Right now, StratoShop is wide open — anyone can access it. In this chapter, we will add an Auth Provider to require login and then use permissions to restrict what different users can do.
📄️ The Data-Driven Dashboard
So far, all our views have been generated from ``. But a real admin dashboard usually has a home page with KPI cards, charts, and summaries. In this chapter, we will build one using Strato Admin's headless data hooks and Cloudscape's chart components.
📄️ Going Global: Internationalization (i18n)
Strato Admin has first-class support for multiple languages using ICU MessageFormat — the same standard used by most professional localization platforms. In this chapter, we will add French to StratoShop.
📄️ Deployment & Best Practices
StratoShop is complete. In this final chapter, we will build it for production, cover the basics of testing, and point you toward the next steps in the Strato Admin documentation.