2025-11-28 14:14:12 -08:00
|
|
|
# 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
|
|
|
|
|
|
|
|
|
|
1. Install dependencies:
|
|
|
|
|
```bash
|
|
|
|
|
pnpm install
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
2. Start the development server:
|
|
|
|
|
```bash
|
|
|
|
|
pnpm dev
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
3. Open your browser to `http://localhost:5173`
|
|
|
|
|
|
|
|
|
|
### Build for Production
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
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
|
|
|
|
|
|
|
|
|
|
1. **Adjust Badge Geometry**: Use the left panel to set diameter, stroke width, and dual-ring options
|
|
|
|
|
2. **Add Star**: Enable and configure a star with customizable points, radii, and metallic finish
|
|
|
|
|
3. **Configure Shield**: Set up 1-4 quadrants with background colors and images
|
|
|
|
|
4. **Add Text**: Create arc text (top/bottom) or ribbon text with full styling options
|
|
|
|
|
5. **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
|
