Name: Ecommerce Store
Availability: InStock

Get started

Ready to build

Build the app you keep thinking about.

Describe your idea. Sanic AI builds the real app, end to end.

Start building See how it works

Built with Appsanic

Ecommerce Store

A clean storefront for any brand

A complete storefront starter in a black + gold minimal aesthetic, running on your own Supabase project. Searchable product grid with category chips, image-led category browse, product detail with a paged gallery, size pills, color swatches and a sticky add-to-bag, a bag with quantity steppers and free-shipping hint, server-authoritative checkout that prices from the database, and an account with order history. Includes a 'Preview with sample data' mode to explore before connecting a backend.

Searchable product grid with category chips, sale chips and sold-out veils
Product detail with paged gallery, size pills, color swatches and add-to-bag
Bag with quantity steppers, free-shipping hint and a 'Pay $XX.XX' CTA
Server-authoritative checkout that prices from the database and decrements stock
Account with real order history and status chips, plus email/password auth
Supabase schema with RLS and Realtime, and a 'Preview with sample data' mode

Use this template

What you can do

Atelier is a full-featured mobile storefront (Expo + React Native) that runs on your own Supabase project. Shoppers browse a searchable product grid with category chips, drill into a category, open a product with a paged photo gallery, pick a size and color, add to bag, and check out, with order history on an account screen. It is not instant-on: the app opens on a Connect screen until you wire up Supabase and apply the schema (you can tap 'Preview with sample data' to explore first), and shopping requires an email/password account.

Made forFounders and brands who want a clean, production-grade native storefront backed by their own Supabase.

Browse a searchable product grid with category chips, sale chips, low-stock hints, and sold-out veils
Explore an image-led category browse with cover photos and product counts
View product detail with a paged photo gallery, segmented size pills, named color swatches, a quantity stepper, and a sticky add-to-bag showing a live price
Manage a bag with quantity steppers, a free-shipping progress hint, and clear subtotal / shipping / total
Check out securely with server-authoritative pricing - the database prices the order, rejects overselling, and decrements stock in one transaction
See real order history with status chips on an account screen, and sign in / sign up with email and password
Try the whole app instantly via an opt-in 'Preview with sample data' mode before connecting a backend

Under the hood

For developers: exactly what is included when you start from this template, taken straight from the template's own code.

Stack

Expo SDK 54React Native 0.81React 19.1TypeScript ~5.9Supabase (Postgres, Auth, Realtime) via @supabase/supabase-js ^2.45react-native-safe-area-context, react-native-svgHand-rolled useState router and a useSyncExternalStore store (no navigation/state libraries)All money handled as integer cents

Screens

Connect
Shown until Supabase is configured: explains setup and offers a 'Preview with sample data' button to explore without a backend.
Auth
Email/password sign-in and sign-up; sign-up captures a display name for the new customer row.
Shop
The storefront - serif wordmark, search field, category chips, and a two-column product grid with sale, low-stock, and sold-out signals.
Categories
Image-led browse of the catalogue: a cover card per category with its name and product count.
Category Products
The two-column product grid for one selected category, with a back header.
Product Detail
Paged photo gallery, segmented size pills, named color swatches, a quantity stepper, and a sticky add-to-bag with a live price.
Bag
Line items with quantity steppers and remove, a free-shipping progress hint, subtotal/shipping/total, and a 'Pay $XX.XX' checkout button.
Account
Customer greeting, real order history with status chips and a line preview, a settings scaffold, and sign out.
Thank You
Post-checkout confirmation with a check, the order reference, an item summary, and the total.

Data model

customers
One row per signed-in user (mirrors auth.users); holds email and display name.
categories
Storefront categories with name, slug, cover image, and a maintained product_count.
products
Catalogue items: price/compare-at in cents, image, gallery, sizes, colors, inventory, and rating.
cart_items
Each customer's bag - product plus chosen size/color and quantity, deduped per variant.
orders
Placed orders with a unique reference, status, subtotal/shipping/total in cents, and timestamps.
order_items
Line snapshots captured at order time (name, image, size, color, quantity, unit price).

Backend

Row Level Security on all six tables: customers read only their own row; cart_items and orders are scoped per customer via auth.uid(); order_items are readable only through the owning order; categories and products are public-read with no client write policy (manage in the dashboard).
Trigger handle_new_customer (SECURITY DEFINER, on auth.users insert via on_auth_user_created) auto-creates the customers row from auth metadata.
Trigger bump_product_count (SECURITY DEFINER, fired by trg_product_count on products insert/delete/category change) keeps categories.product_count in sync.
SECURITY DEFINER RPC place_order(p_payment_provider) runs the whole checkout in one transaction: prices the cart from the products table (never the client), rejects overselling, decrements inventory, writes the order plus line snapshots, and clears the cart. Orders have no client insert policy, so checkout is server-authoritative. No real payment is captured - gate place_order behind a verified payment before going live.
Realtime: categories, products, cart_items, orders, and order_items are added to the supabase_realtime publication; cart_items uses REPLICA IDENTITY FULL so delete payloads carry customer_id for the client's cart subscription.
No Edge Functions. No storage buckets (product images are external URLs). Only the Supabase anon key ships in the app, protected by RLS.

More templates

All templates

Commerce

Restaurant Ordering App

Menus and ordering in your pocket

View template

Social

Photo Journal App

One photo a day, with your friends

View template

Social

Social Feed App

An Instagram-style starter: feed, stories, likes, comments, follows, and an activity inbox

View template

Social

Live Streaming App

Broadcast yourself, watch others live

View template

Built with Appsanic

Ecommerce Store

A clean storefront for any brand

Searchable product grid with category chips, sale chips and sold-out veils
Product detail with paged gallery, size pills, color swatches and add-to-bag
Bag with quantity steppers, free-shipping hint and a 'Pay $XX.XX' CTA
Server-authoritative checkout that prices from the database and decrements stock
Account with real order history and status chips, plus email/password auth
Supabase schema with RLS and Realtime, and a 'Preview with sample data' mode

Use this template

What you can do

Made forFounders and brands who want a clean, production-grade native storefront backed by their own Supabase.

Browse a searchable product grid with category chips, sale chips, low-stock hints, and sold-out veils
Explore an image-led category browse with cover photos and product counts
View product detail with a paged photo gallery, segmented size pills, named color swatches, a quantity stepper, and a sticky add-to-bag showing a live price
Manage a bag with quantity steppers, a free-shipping progress hint, and clear subtotal / shipping / total
Check out securely with server-authoritative pricing - the database prices the order, rejects overselling, and decrements stock in one transaction
See real order history with status chips on an account screen, and sign in / sign up with email and password
Try the whole app instantly via an opt-in 'Preview with sample data' mode before connecting a backend

Under the hood

For developers: exactly what is included when you start from this template, taken straight from the template's own code.

Stack

Screens

Connect
Shown until Supabase is configured: explains setup and offers a 'Preview with sample data' button to explore without a backend.
Auth
Email/password sign-in and sign-up; sign-up captures a display name for the new customer row.
Shop
The storefront - serif wordmark, search field, category chips, and a two-column product grid with sale, low-stock, and sold-out signals.
Categories
Image-led browse of the catalogue: a cover card per category with its name and product count.
Category Products
The two-column product grid for one selected category, with a back header.
Product Detail
Paged photo gallery, segmented size pills, named color swatches, a quantity stepper, and a sticky add-to-bag with a live price.
Bag
Line items with quantity steppers and remove, a free-shipping progress hint, subtotal/shipping/total, and a 'Pay $XX.XX' checkout button.
Account
Customer greeting, real order history with status chips and a line preview, a settings scaffold, and sign out.
Thank You
Post-checkout confirmation with a check, the order reference, an item summary, and the total.

Data model

customers
One row per signed-in user (mirrors auth.users); holds email and display name.
categories
Storefront categories with name, slug, cover image, and a maintained product_count.
products
Catalogue items: price/compare-at in cents, image, gallery, sizes, colors, inventory, and rating.
cart_items
Each customer's bag - product plus chosen size/color and quantity, deduped per variant.
orders
Placed orders with a unique reference, status, subtotal/shipping/total in cents, and timestamps.
order_items
Line snapshots captured at order time (name, image, size, color, quantity, unit price).

Backend

Row Level Security on all six tables: customers read only their own row; cart_items and orders are scoped per customer via auth.uid(); order_items are readable only through the owning order; categories and products are public-read with no client write policy (manage in the dashboard).
Trigger handle_new_customer (SECURITY DEFINER, on auth.users insert via on_auth_user_created) auto-creates the customers row from auth metadata.
Trigger bump_product_count (SECURITY DEFINER, fired by trg_product_count on products insert/delete/category change) keeps categories.product_count in sync.
SECURITY DEFINER RPC place_order(p_payment_provider) runs the whole checkout in one transaction: prices the cart from the products table (never the client), rejects overselling, decrements inventory, writes the order plus line snapshots, and clears the cart. Orders have no client insert policy, so checkout is server-authoritative. No real payment is captured - gate place_order behind a verified payment before going live.
Realtime: categories, products, cart_items, orders, and order_items are added to the supabase_realtime publication; cart_items uses REPLICA IDENTITY FULL so delete payloads carry customer_id for the client's cart subscription.
No Edge Functions. No storage buckets (product images are external URLs). Only the Supabase anon key ships in the app, protected by RLS.