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
License
Proprietary - All rights reserved