Tutorial

This tutorial walks you through creating a complete Spree feature from scratch, covering models, Admin dashboard, Store API, and TypeScript SDK integration. You will also learn how to extend core Spree features to connect them with your new feature. By the end, you'll understand how to add new manageable features to the Spree platform.

Overview

To fully implement a new feature, you will typically create the following components:

• Database model
• Admin Dashboard controllers and views
• Store API endpoints and serializers
• TypeScript SDK integration
• Automated tests

Tutorial Sections

<CardGroup cols={2}> <Card title="1. Model" icon="database" href="/developer/tutorial/model"> Create the Brand model with migrations, validations, and associations </Card> <Card title="2. Admin Dashboard" icon="gauge" href="/developer/tutorial/admin"> Build admin interface for managing brands </Card> <Card title="3. Rich Text" icon="align-left" href="/developer/tutorial/rich-text"> Add rich text descriptions using Action Text </Card> <Card title="4. File Uploads" icon="image" href="/developer/tutorial/file-uploads"> Add logo images with Active Storage </Card> <Card title="5. Extending Core Models" icon="plug" href="/developer/tutorial/extending-models"> Connect Brands to Products using associations </Card> <Card title="6. Store API" icon="code" href="/developer/tutorial/store-api"> Expose Brands through the Store API with serializers, controllers, and routes </Card> <Card title="7. SDK" icon="js" href="/developer/tutorial/sdk"> Consume Brand endpoints from TypeScript using the SDK </Card> <Card title="8. Testing" icon="flask-vial" href="/developer/tutorial/testing"> Write automated tests for your feature </Card> </CardGroup>

Example: Building a Brands Feature

In this guide we will create a complete "Brands" feature that allows admins to manage Product brands.