Build an E-commerce Store: Single App Architecture

grit new shop --single --vite

shop/
├── main.go                     # Entry point (serves API + embedded frontend)
├── go.mod
├── go.sum
├── .env
├── .gitignore
├── docker-compose.yml          # PostgreSQL, Redis, MinIO, Mailhog
├── internal/
│   ├── config/                 # Environment config
│   ├── database/               # DB connection + migrations
│   ├── handler/                # HTTP handlers
│   ├── middleware/              # Auth, CORS, logging
│   ├── model/                  # GORM models
│   ├── router/                 # Route definitions
│   └── service/                # Business logic
└── frontend/
    ├── src/
    │   ├── routes/             # File-based routing (TanStack Router)
    │   ├── components/         # React components
    │   ├── hooks/              # Custom hooks
    │   └── lib/                # API client, utils
    ├── index.html
    ├── package.json
    ├── vite.config.ts
    ├── tailwind.config.ts
    └── tsconfig.json

# Category — product organization
grit generate resource Category --fields "name:string,slug:slug:name,description:text:optional,image:string:optional"

# Product — what you sell
grit generate resource Product --fields "name:string,slug:slug:name,price:float,description:richtext,stock:int,active:bool,category_id:belongs_to:Category,image:string:optional"

# Order — customer purchases
grit generate resource Order --fields "customer_name:string,customer_email:string,total:float,status:string,notes:text:optional"

cd shop
docker compose up -d
go run main.go

cd shop/frontend
pnpm install
pnpm dev

server: {
  port: 5173,
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
    },
  },
}

POST /api/categories
{"name": "Electronics", "description": "Phones, laptops, tablets, and accessories"}

POST /api/categories
{"name": "Clothing", "description": "Men and women apparel"}

POST /api/categories
{"name": "Home & Kitchen", "description": "Furniture, cookware, and home decor"}

POST /api/categories
{"name": "Books", "description": "Fiction, non-fiction, and technical books"}

POST /api/categories
{"name": "Sports", "description": "Equipment, apparel, and accessories"}

POST /api/products
{
  "name": "Wireless Noise-Cancelling Headphones",
  "price": 149.99,
  "description": "<p>Premium wireless headphones with active noise cancellation. 30-hour battery life, Bluetooth 5.3, and memory foam ear cushions.</p>",
  "stock": 50,
  "active": true,
  "category_id": 1
}

POST /api/products
{
  "name": "Mechanical Keyboard",
  "price": 89.99,
  "description": "<p>RGB mechanical keyboard with Cherry MX switches. Hot-swappable, aluminum frame, USB-C connection.</p>",
  "stock": 30,
  "active": true,
  "category_id": 1
}

import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { Link } from '@tanstack/react-router'

export default function ProductListing() {
  const [activeCategory, setActiveCategory] = useState(null)

  const { data: categories } = useQuery({
    queryKey: ['categories'],
    queryFn: () => api.get('/api/categories'),
  })

  const { data: products, isLoading } = useQuery({
    queryKey: ['products', activeCategory],
    queryFn: () => api.get('/api/products?category_id=' + (activeCategory || '')),
  })

  return (
    <div>
      {/* Category filter tabs */}
      <div className="flex gap-2">
        <button onClick={() => setActiveCategory(null)}>All</button>
        {/* Map categories to tab buttons */}
      </div>

      {/* Product grid */}
      <div className="grid grid-cols-4 gap-6">
        {/* Map products to cards with image, name, price */}
        {/* Each card links to /products/[slug] */}
      </div>
    </div>
  )
}

import { useParams } from '@tanstack/react-router'
import { useQuery } from '@tanstack/react-query'

export default function ProductDetail() {
  const { slug } = useParams({ from: '/products/$slug' })

  const { data, isLoading } = useQuery({
    queryKey: ['product', slug],
    queryFn: () => api.get('/api/products?slug=' + slug),
  })

  // Display: product image, name, price, stock status
  // Category name as breadcrumb
  // Add to Cart button (disabled if out of stock)
  // Rich text description rendered with dangerouslySetInnerHTML
  // Price formatted with .toFixed(2)
}

// useCart() custom hook — client-side cart management
// No backend needed for MVP cart
//
// State: CartItem[] with id, name, price, quantity, image
//
// addToCart(product):
//   - Find existing item by ID
//   - If found: increment quantity
//   - If new: add with quantity 1
//
// removeFromCart(id): filter out by ID
// updateQuantity(id, qty): map and update matching item
// clearCart(): reset to empty array
//
// total: items.reduce(sum + price * quantity)
// itemCount: items.reduce(sum + quantity)
//
// Usage in components:
//   const { items, addToCart, removeFromCart, total } = useCart()
//   addToCart({ id: 1, name: "Widget", price: 9.99 })
//   removeFromCart(1)

// Checkout page flow:
// 1. Get cart items and total from useCart() hook
// 2. Show order summary: each item with qty, name, price
// 3. Show form: customer name + email inputs
// 4. On submit: POST /api/orders with customer info + total
//    notes field: items.map(i => i.quantity + 'x ' + i.name).join(', ')
// 5. On success: clearCart() and navigate to confirmation page
//
// useMutation for the API call:
//   mutationFn: () => api.post('/api/orders', orderData)
//   onSuccess: () => { clearCart(); navigate('/order-confirmation') }
//
// If cart is empty, show "Your cart is empty" message

# Step 1: Build the React frontend into static files
cd frontend
pnpm build
# Output: frontend/dist/ (HTML, JS, CSS)

# Step 2: Build the Go binary (embeds frontend/dist/ automatically)
cd ..
go build -o shop main.go
# Output: shop (or shop.exe on Windows)

# Step 3: Run the production binary
./shop
# Serves API at /api/* and frontend at /* on port 8080

import "embed"

//go:embed frontend/dist/*
var frontendFS embed.FS

func main() {
    // ... setup router, middleware, handlers

    // Serve embedded frontend for non-API routes
    router.NoRoute(gin.WrapH(http.FileServer(http.FS(frontendFS))))

    router.Run(":8080")
}