Molecule.dev

Grocery Delivery

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

Instacart-like grocery delivery with categories, substitution preferences, delivery slots, and real-time order tracking — with built-in Stripe-backed subscription tiers

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 (15)

  • Landing /
  • Login /login
  • Signup /signup
  • ForgotPassword /forgot-password
  • ResetPassword /reset-password
  • Shop /shop (signed in)
  • ProductDetail /product/:id (signed in)
  • Cart /cart (signed in)
  • OrderTracking /order/:id (signed in)
  • Orders /orders (signed in)
  • Settings /settings (signed in)
  • Checkout /checkout (signed in)
  • Search /search (signed in)
  • Lists /lists (signed in)
  • OrderConfirmation /order/:id/confirmation (signed in)

Data model (15 tables)

  • cart_items — id, user_id, cart_id, product_id, quantity, substitution_preference, substitute_id, notes, …
  • carts — id, user_id, status, created_at, updated_at
  • delivery_slots — id, date, start_time, end_time, capacity, remaining_capacity, fee_override, region, …
  • delivery_zones — id, name, polygon, active, created_at, updated_at
  • devices — id, createdAt, updatedAt, userId, name, pushPlatform, pushSubscription, hasPushSubscription
  • inventory_movements — id, productId, variantId, type, quantity, reason, referenceId, createdAt
  • inventory_reservations — id, productId, variantId, quantity, orderId, createdAt
  • inventory_stock — id, productId, variantId, total, reserved, lowStockThreshold, createdAt, updatedAt
  • order_events — id, order_id, status, note, created_at
  • order_items — id, order_id, product_id, original_product_id, name, quantity, unit_price, substitution_preference, …
  • orders — id, user_id, status, subtotal, tax, delivery_fee, tip, total, …
  • payments — id, createdAt, updatedAt, userId, transactionId, productId, platformKey, data, …
  • products — id, created_by, name, slug, description, price, currency, unit, …
  • shopping_list_items — id, list_id, product_id, quantity, created_at
  • shopping_lists — id, user_id, name, created_at, updated_at

API (6 handlers)

  • \_seed api/src/handlers/_seed.ts
  • cart api/src/handlers/cart.ts
  • delivery-slots api/src/handlers/delivery-slots.ts
  • lists api/src/handlers/lists.ts
  • orders api/src/handlers/orders.ts
  • products api/src/handlers/products.ts

Subscription tiers

free / pro / team — gated by: maxCart, maxDeliverySlots, maxOrders, maxProducts, advancedFeatures, canExport, retentionDays

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
  • GOOGLE_MAPS_API_KEY Google Maps API key for delivery routing and address validation
  • 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

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