# How to Build an Admin-Only E-Commerce Showcase in 5 Steps

November 6, 2025 by [Jing](/content/resources/author/Jing.png)

Not every store needs carts and checkout. Many teams want a simple, elegant product catalog that anyone can browse, while a trusted admin curates and publishes entries behind the scenes. This tutorial shows how to build a minimalist e‑commerce showcase: a public product gallery, an admin-only back office, white/green branding, sessions, protected routes, and a clear separation between public and admin areas. With **Zoer**, you describe what you want in natural language and generate the full stack in minutes.

## The Prompt That Generates the App
Use this rephrased prompt in Zoer (kept faithful to your constraints, but not verbatim):

```
"Build a simple e‑commerce showcase with a public catalog and an admin‑only publishing flow.

Core requirements:

- Public visitors can view all products; only authenticated administrators can add or manage products

- Provide a dedicated admin sign‑in screen; no public registration form

- Use a basic username/password login for the admin (credentials are predefined for simplicity; persist session state)

- The homepage should present products from the database in a clean, organized layout

UI/branding:

- Apply a consistent white + green color theme

- Responsive layout for desktop and mobile

- Intuitive navigation that clearly separates public browsing from the admin area

Architecture:

- Choose a modern stack (e.g., React/Vue/Angular for the frontend; Node.js/Python/PHP for the backend)

- Integrate a relational database for product storage and retrieval

- Separate components for product listing, admin login, and product management

- Implement error handling and helpful user feedback

- Keep the codebase clean with good separation of concerns

Data model and queries:

- Products table: id, name, description, price, image_url, created_at

- Admins table for credentials

- Implement product CRUD queries (restricted to authenticated admin)

Security:

- Protect admin routes and enforce session checks

- Validate user inputs and database operations

- Add basic defenses against XSS and injection

Deliver a fully functional, deployment-ready application with documentation."
```

## Step 1: Clarify Scope and Roles  
Focus on two experiences:

- Public users: view products on a clean home page
- Admin user: sign in, add/edit/delete products via a protected interface

## Step 2: Generate with Zoer’s Unified Platform  
### Zoer vs. Traditional Development
| Aspect | Traditional Stack | Zoer Platform |
| --- | --- | --- |
| Timeline | 2–6 weeks | Minutes to hours |
| Database | Hand-modeled schema | AI-generated PostgreSQL schema |
| APIs | Handwritten REST | Generated endpoints + docs |
| Auth | Custom session logic | Built-in email/username auth & sessions |
| Theming | Manual setup | Pre-wired styles you can override |
| Deployment | CI/CD + infra | One-click cloud deploy |

## Step 3: Enable Core Features
### Database Configuration  
Enable **[Zoer Database](/content/docs/core-features/zoer-database/index.html)**. A minimal schema might look like this:
```
-- Simplified e-commerce showcase schema (Zoer will generate and optimize)
CREATE TABLE products (
  id SERIAL PRIMARY KEY,
  name VARCHAR(255) NOT NULL,
  description TEXT,
  price_cents INTEGER NOT NULL,
  image_url TEXT,
  created_at TIMESTAMP DEFAULT NOW()
);

CREATE TABLE admins (
  id SERIAL PRIMARY KEY,
  username VARCHAR(100) UNIQUE NOT NULL,
  password_plain TEXT NOT NULL, -- demo simplicity; replace with hashing in production
  created_at TIMESTAMP DEFAULT NOW()
);
```

### Authentication & Route Protection  
- Dedicated `/admin/login` with username/password
- Store session and gatekeep admin routes (redirect unauthorized visitors)
- Predefine admin credentials for initial access

### UI & Theming  
- White/green theme tokens (buttons, links, accents)
- Clear visual separation between public pages and admin console
- Responsive grid/list for products on the home page

### Error Handling & Feedback  
- Inline form validation and descriptive errors
- Loading and empty states for product lists
- Toasts/snackbars for admin actions (create/update/delete)

## Step 4: Customize with Zoer Copilot  
After deployment, you can evolve behavior via natural language:
```
"Add an image dimension check on product upload and show a warning if width < 800px."

"Introduce a simple search box on the homepage filtering by product name."

"Create an admin audit log that records who changed what and when."

"Add a confirm dialog before deleting a product and show a success toast after."
```

## Step 5: Deploy and Scale  
### Deployment Options  
1. **Zoer Cloud Hosting** — Managed infra with autoscaling and backups  
2. **[Code Export](/content/docs/core-features/download-code/index.html)** — Self-host for deeper customization

### Example Code Export Structure
```
ai-ecommerce-showcase/
├── src/app/next_api/
│   ├── auth/           # Admin login/session endpoints
│   ├── products/       # Public list + admin CRUD endpoints
│   └── theme/          # Theme tokens and helpers
├── src/components/shop/  # Public product grid/list components
├── src/components/admin/ # Admin console views and forms
├── app.sql               # PostgreSQL schema
└── package.json          # Dependencies
```

## Security Notes  
- Route guards for all admin endpoints
- Session management with secure cookies
- Input validation and parameterized queries
- Basic XSS/SQLi mitigations

## Getting Started  
1. **Open Zoer** and create a new app
2. **Paste the prompt** (above) and enable Database and Authentication
3. **Review generated features**: public listing, admin login, product CRUD
4. **Set initial admin credentials** and theme tokens (white/green)
5. **Deploy** to Zoer Cloud or **export code** to self-host

Ship a clean, admin‑curated product gallery in minutes — and keep full control over branding and workflow.