Web Template Wizard

Web Template Wizard is an open-source CLI for building responsive website templates with CMS, admin dashboard, Firebase, and theme settings.

npx web-template-wizard create my-website

For local development:

npm run dev -- create my-website

What It Generates

• Public responsive website
• Admin login and dashboard
• CMS-backed content
• Firebase Auth
• Firestore
• Firebase Storage
• Theme color settings
• SEO metadata setup
• Contact form
• Firestore and Storage rules
• .env.example
• Setup README
• Product search/filter UI for Product Catalog websites
• Product/category CMS structure for Product Catalog websites

Installation

npm install
npm run build

Local Development

Run the CLI locally with:

npm run dev -- create my-website

Generate a specific template:

npm run dev -- create company-site --app-type company-profile --frontend next --storage firebase-storage
npm run dev -- create catalog-site --app-type product-catalog --frontend next --storage firebase-storage

The generated app then runs with:

cd my-website
npm install
npm run dev

CLI Examples

npm run dev -- create my-website
npm run dev -- create acme-site --app-type company-profile
npm run dev -- create catalog-site --app-type product-catalog --frontend next --storage firebase-storage

The published command target is:

npx web-template-wizard create my-website

Package builds expose the executable as:

web-template-wizard create my-website

Supported App Types

• Landing Page
• Company Profile
• Product Catalog Website

Frontend

• Next.js App Router: fully supported
• React.js: planned
• Nuxt.js: planned

If React.js or Nuxt.js is selected interactively, the CLI explains that it is planned and asks whether to continue with Next.js. In non-interactive/scripted runs, it prints a warning and generates the stable Next.js template instead so automation does not hang.

Storage

• Firebase Storage: fully supported
• Bunny.net: planned
• No Storage: planned

If Bunny.net or No Storage is selected interactively, the CLI explains that it is planned and asks whether to continue with Firebase Storage. In non-interactive/scripted runs, it prints a warning and generates the stable Firebase Storage template instead.

Template Architecture

Web Template Wizard uses a modular template system to avoid a separate full project template for every combination:

Core Engine
+ Frontend Base Template
+ App Type Template
+ CMS Schema
+ Admin Pages
+ Theme Preset
+ Storage Adapter

The generator starts from templates/next/base, merges generated Firebase rules from templates/next/modules/firestore-rules, then overlays one of the supported app types from templates/next/app-types/*.

The base template owns shared Next.js, Firebase client, admin, CMS services, theme, contact, layout, and UI components. App-type templates own public pages, app-specific CMS schema/defaults/forms, sections, and theme presets.

Firestore Structure

siteSettings/
  theme
  seo
  general

cms/
  landingPage
  companyProfile
  productCatalog

products/
  {productId}

categories/
  {categoryId}

messages/
  {messageId}

Security Model

Projects created by the CLI use one role: admin. Public visitors can read published content and submit contact messages. Admin users can write CMS content, manage theme settings, and upload safe images.

Admin access is based on an email allowlist for this release. The project README and security rules explain how to create the first admin safely and how to migrate to custom claims later.

Roadmap

• Optional Firebase custom claims script
• Sitemap and robots generation
• React.js and Nuxt.js frontend adapters
• Bunny.net and no-storage modes
• Additional app types through the same modular template boundary

Contributing

Keep changes modular:

• Shared behavior belongs in the frontend base template or modules.
• App-specific public UI, CMS schema, default content, and admin form belong in the app type template.
• Avoid duplicating Firebase, theme, auth, or CRUD logic across app types.
• Keep generated projects runnable with npm install and npm run dev.