Badge Creation Platform PRO

An enterprise-grade badge creation and SVG rendering platform designed for law enforcement, diplomatic, security, commercial, and government agencies.

Features

Phase 1 - Core Builder (Current)

✅ Dynamic resizable badge layout (2.0" - 4.0" diameter)
✅ Star engine (5-10 points with customizable inner/outer radius)
✅ Shield builder (1-4 quadrants with image upload)
✅ Arc text engine (top/bottom positioning)
✅ Ribbon & title bar system
✅ Real-time SVG preview with zoom/pan
✅ Basic export (SVG/PNG)
✅ Undo/Redo history system

Coming Soon

Layer management system
Manufacturing export formats (AI/EPS/DXF/PDF)
Icon library integration
Cloud storage and versioning
Multi-user collaboration
AI-assisted design
And more...

Tech Stack

Frontend: React 18+ with TypeScript
Build Tool: Vite
Styling: Tailwind CSS
UI Components: shadcn/ui (Radix UI primitives)
State Management: Zustand
SVG Rendering: Native SVG DOM + custom generators
Drag & Drop: React DnD

Getting Started

Prerequisites

Node.js 18+ and pnpm

Installation

Install dependencies:

pnpm install

Start the development server:

pnpm dev

Open your browser to http://localhost:5173

Build for Production

pnpm build

The production build will be in the dist directory.

Project Structure

src/
├── components/
│   ├── ui/              # shadcn/ui components
│   ├── controls/        # Badge control panels
│   ├── BadgeCanvas.tsx  # Main SVG canvas
│   └── ExportModal.tsx  # Export dialog
├── stores/
│   └── badgeStore.ts    # Zustand state management
├── types/
│   └── badge.ts         # TypeScript type definitions
├── utils/
│   └── svgGenerators.ts # SVG generation utilities
└── lib/
    └── utils.ts         # Utility functions

Usage

Adjust Badge Geometry: Use the left panel to set diameter, stroke width, and dual-ring options
Add Star: Enable and configure a star with customizable points, radii, and metallic finish
Configure Shield: Set up 1-4 quadrants with background colors and images
Add Text: Create arc text (top/bottom) or ribbon text with full styling options
Export: Click the Export button to download as SVG or PNG

Development Roadmap

See the implementation plan for detailed phases:

Phase 1: Core Builder ✅
Phase 2: Pro Tools (Layer Management, Advanced Exports)
Phase 3: Cloud & Accounts
Phase 4: Agency/Enterprise Features
Phase 5: AI & Plugins
Phase 6: Testing & Deployment

2.7 KiB Raw Permalink Blame History