@danielkmwangangi/remix-ecommerce

A complete e-commerce solution for Remix applications with Supabase backend, admin portal, and Stripe payments.

Features

• 🛍️ Complete E-commerce Flow: Product listing, detail pages, shopping cart, checkout, and order management
• 🎨 Admin Portal: Full admin dashboard for managing products, orders, and inventory
• 💳 Payment Integration: Stripe payment processing ready
• 🗄️ Supabase Backend: Uses Supabase for database and real-time capabilities
• 📦 Installable Package: Easy to install and integrate into any Remix app
• 🎯 Type-Safe: Full TypeScript support
• 🚀 Production Ready: Includes sample data, migrations, and best practices

Installation

npm install @danielkmwangangi/remix-ecommerce

Quick Start

1. Set Up Supabase

1. Create a new project at supabase.com
2. Go to SQL Editor and run the schema:

-- Copy and paste the contents of database/schema.sql

3. (Optional) Seed sample data:

-- Copy and paste the contents of database/seed.sql

2. Configure Environment Variables

Create a .env file in your Remix app:

SUPABASE_URL=your-supabase-project-url
SUPABASE_ANON_KEY=your-supabase-anon-key
SUPABASE_SERVICE_KEY=your-supabase-service-role-key
STRIPE_SECRET_KEY=your-stripe-secret-key
SESSION_SECRET=your-random-session-secret

3. Create Route Files

Create route files in your app/routes/ directory. Each route file is just a simple re-export - copy and paste these starter files:

Shop Listing Page (app/routes/shop._index.tsx)

export { loader, action, meta } from "@danielkmwangangi/remix-ecommerce/dist/routes/shop._index.js";
export { default } from "@danielkmwangangi/remix-ecommerce/dist/routes/shop._index.js";

Product Detail Page (app/routes/shop.products.$id.tsx)

export { loader, action, meta } from "@danielkmwangangi/remix-ecommerce/dist/routes/shop.products.$id.js";
export { default } from "@danielkmwangangi/remix-ecommerce/dist/routes/shop.products.$id.js";

Shopping Cart (app/routes/cart.tsx)

export { loader, action, meta } from "@danielkmwangangi/remix-ecommerce/dist/routes/cart.js";
export { default } from "@danielkmwangangi/remix-ecommerce/dist/routes/cart.js";

Checkout Page (app/routes/checkout.tsx)

export { loader, action, meta } from "@danielkmwangangi/remix-ecommerce/dist/routes/checkout.js";
export { default } from "@danielkmwangangi/remix-ecommerce/dist/routes/checkout.js";

Order Confirmation (app/routes/order-confirmation.tsx)

export { loader, meta } from "@danielkmwangangi/remix-ecommerce/dist/routes/order-confirmation.js";
export { default } from "@danielkmwangangi/remix-ecommerce/dist/routes/order-confirmation.js";

Admin Dashboard (app/routes/admin._index.tsx)

export { loader, meta } from "@danielkmwangangi/remix-ecommerce/dist/routes/admin._index.js";
export { default } from "@danielkmwangangi/remix-ecommerce/dist/routes/admin._index.js";

Admin Products List (app/routes/admin.products._index.tsx)

export { loader, meta } from "@danielkmwangangi/remix-ecommerce/dist/routes/admin.products._index.js";
export { default } from "@danielkmwangangi/remix-ecommerce/dist/routes/admin.products._index.js";

Admin Product Edit/Create (app/routes/admin.products.$id.tsx)

export { loader, action, meta } from "@danielkmwangangi/remix-ecommerce/dist/routes/admin.products.$id.js";
export { default } from "@danielkmwangangi/remix-ecommerce/dist/routes/admin.products.$id.js";

Admin Orders List (app/routes/admin.orders._index.tsx)

export { loader, meta } from "@danielkmwangangi/remix-ecommerce/dist/routes/admin.orders._index.js";
export { default } from "@danielkmwangangi/remix-ecommerce/dist/routes/admin.orders._index.js";

Admin Order Detail (app/routes/admin.orders.$id.tsx)

export { loader, action, meta } from "@danielkmwangangi/remix-ecommerce/dist/routes/admin.orders.$id.js";
export { default } from "@danielkmwangangi/remix-ecommerce/dist/routes/admin.orders.$id.js";

📝 Note: See STARTER_ROUTES.md in the package for a complete list of all starter route files with full code examples.

4. Add Floating Cart Button (Optional but Recommended)

Add the floating cart button to your root layout:

// In app/root.tsx
import { useLoaderData } from "@remix-run/react";
import type { LoaderFunctionArgs } from "@remix-run/node";
import { json } from "@remix-run/node";
import { getCartCount, FloatingCartButton } from "@danielkmwangangi/remix-ecommerce";

export async function loader({ request }: LoaderFunctionArgs) {
  const cartCount = await getCartCount(request);
  return json({ cartCount });
}

export default function App() {
  const { cartCount } = useLoaderData<typeof loader>();

  return (
    <>
      <Outlet />
      <FloatingCartButton cartCount={cartCount} />
    </>
  );
}

5. Add Styles

Import the Tailwind CSS configuration or add the styles to your app:

// In your root.tsx or layout
import "@danielkmwangangi/remix-ecommerce/styles";

Available Routes

Customer-Facing Routes

• /shop - Product listing page
• /shop/products/:id - Product detail page
• /cart - Shopping cart
• /checkout - Checkout page
• /order-confirmation - Order confirmation page

Admin Routes

• /admin - Admin dashboard
• /admin/products - Product management
• /admin/orders - Order management
• /admin/orders/:id - Order detail page

Database Schema

The package includes a complete database schema for:

• Products: Product catalog with images, pricing, inventory
• Categories: Product categorization
• Cart Items: Session-based shopping cart
• Orders: Order management
• Order Items: Order line items
• Payments: Payment tracking (optional)

See database/schema.sql for the complete schema.

API Reference

Products

import { getProducts, getProduct, createProduct } from "@danielkmwangangi/remix-ecommerce";

// Get products with filters
const products = await getProducts({
  page: 1,
  per_page: 12,
  search: "laptop",
  category: "electronics"
});

// Get single product
const product = await getProduct(1);

// Create product (admin)
const newProduct = await createProduct({
  name: "New Product",
  price: 99.99,
  // ... other fields
});

Cart

import { getCart, addToCart, getCartCount } from "@danielkmwangangi/remix-ecommerce";

// Get cart
const cart = await getCart(request);

// Add to cart
const updatedCart = await addToCart(request, productId, quantity);

// Get cart count (for floating button)
const cartCount = await getCartCount(request);

Components

import { FloatingCartButton } from "@danielkmwangangi/remix-ecommerce";

// Use in your root layout
<FloatingCartButton 
  cartCount={cartCount}
  position="bottom-center"  // or "bottom-right" | "bottom-left"
  hideOnPaths={["/checkout", "/admin"]}
/>

Orders

import { createOrder, getOrder } from "@danielkmwangangi/remix-ecommerce";

// Create order
const order = await createOrder(request, shippingInfo, paymentIntentId);

// Get order
const order = await getOrder(orderId);

Customization

Styling

The package uses Tailwind CSS. You can customize the styles by:

1. Overriding Tailwind classes in your app
2. Using CSS modules
3. Extending the Tailwind config

Adding Custom Fields

You can extend the database schema to add custom fields to products, orders, etc. Just make sure to update the TypeScript types accordingly.

Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build package
npm run build

# Type check
npm run typecheck

License

MIT

Support

For issues and questions, please open an issue on the GitHub repository.