Molecule.dev

Online Store

E-commerce · React + Node (Express) · 23 @molecule/* packages

Shopify-like storefront with product catalog, cart, checkout, and inventory management — including a built-in subscription tier (Free / Pro / Team) backed by Stripe

Open in Molecule

Try it

Opens instantly. Runs on sample data, so changes reset on reload.

Open preview in a new tab ↗View workspace ↗

What is inside

Screens (18)

  • StorefrontPage /
  • ProductDetailPage /product/:id
  • CartPage /cart
  • CheckoutPage /checkout (signed in)
  • OrdersPage /orders (signed in)
  • AdminProductsPage /admin/products (signed in)
  • AdminOrdersPage /admin/orders (signed in)
  • Login /login
  • AdminDashboardPage /admin (signed in)
  • AdminSettingsPage /admin/settings (signed in)
  • CategoryPage /category/:slug
  • OrderDetailPage /orders/:id (signed in)
  • SearchPage /search
  • Settings /settings (signed in)
  • WishlistPage /wishlist (signed in)
  • Signup /signup
  • ForgotPassword /forgot-password
  • ResetPassword /reset-password

Data model (10 tables)

  • cart_items — id, user_id, product_id, variant_id, quantity, created_at, updatedAt
  • wishlists — id, user_id, product_id, created_at, updatedAt
  • newsletter_subscriptions — id, email, created_at, updatedAt
  • devices — id, createdAt, updatedAt, userId, name, pushPlatform, pushSubscription, hasPushSubscription
  • inventory — id, product_id, available, reserved, reason, updated_at, updatedAt, created_at
  • order_items — id, order_id, product_id, variant_id, quantity, unit_price, name, created_at, …
  • orders — id, user_id, status, subtotal, tax, shipping, total, currency, …
  • payments — id, createdAt, updatedAt, userId, transactionId, productId, platformKey, data, …
  • products — id, user_id, name, description, price, category, sku, variants, …
  • reviews — id, user_id, product_id, rating, title, body, status, created_at, …

API (10 handlers)

  • \_test api/src/handlers/_test.ts
  • admin api/src/handlers/admin.ts
  • cart api/src/handlers/cart.ts
  • newsletter api/src/handlers/newsletter.ts
  • orders api/src/handlers/orders.ts
  • products api/src/handlers/products.ts
  • reviews api/src/handlers/reviews.ts
  • settings api/src/handlers/settings.ts
  • storefront api/src/handlers/storefront.ts
  • wishlist api/src/handlers/wishlist.ts

Subscription tiers

free / pro / team — gated by: maxProducts, maxOrdersPerMonth, maxSkuVariantsPerProduct, maxStorageMb, customDomain, abandonedCartRecovery, advancedAnalytics, transactionFeePercent, multiCurrency

Built from 23 @molecule/* packages

Browse all @molecule/* packages →

Required secrets

  • DATABASE_URL PostgreSQL connection string
  • STRIPE_SECRET_KEY Stripe secret API key for payment processing
  • STRIPE_PUBLISHABLE_KEY Stripe publishable key for client-side checkout
  • STRIPE_WEBHOOK_SECRET Stripe webhook signing secret
  • MEILISEARCH_API_KEY MeiliSearch admin API key
  • S3_BUCKET S3 bucket for product images
  • AWS_ACCESS_KEY_ID AWS access key for S3
  • AWS_SECRET_ACCESS_KEY AWS secret key for S3
  • MAILGUN_API_KEY Mailgun API key for transactional emails
  • MAILGUN_DOMAIN Mailgun sending domain
  • OPENAI_API_KEY OpenAI API key for product recommendations

The @molecule/* packages are Apache-2.0. The app you build from this template is yours to export and self-host. Licensing