A modern, full-stack badge generation and customization platform built with the Better-T-Stack
Features • Quick Start • Tech Stack • Project Structure • Documentation
- Multiple Style Presets: Choose from 7 different badge styles (Flat, Flat-Square, Rounded, Plastic, Folded, For-The-Badge)
- Icon Integration: Extensive icon library for badge customization
- Advanced Settings: Fine-tune colors, text, and styling options
- Real-time Preview: See changes instantly as you customize
- Type-Safe APIs: End-to-end type safety with tRPC
- Monorepo Structure: Efficient code organization with Turborepo
- Component Library: Pre-built UI components with shadcn/ui
- Database ORM: Type-safe database queries with Prisma
- TypeScript First: Complete type safety across the stack
- Hot Reload: Fast refresh for rapid development
- Code Quality: Built-in linting and type checking
- Modern Tooling: Powered by Bun for lightning-fast performance
- Dynamic Badge API: Generate badges on-the-fly via API endpoints
- Badge Gallery: Browse and explore pre-made badge templates
- Query-Based Generation: Create badges from URL parameters
- SVG Output: Scalable vector graphics for perfect quality
Before you begin, ensure you have the following installed:
-
Clone the repository
git clone https://github.com/SinghAman21/peakmark cd peakmark -
Install dependencies
bun install
-
Start the development server
bun run dev
-
Open your browser
Navigate to http://localhost:3000 to see the application in action!
- Next.js 16 - React framework with App Router
- React 18 - UI library
- TailwindCSS - Utility-first CSS framework
- shadcn/ui - Re-usable component library
- Radix UI - Unstyled, accessible components
- tRPC - End-to-end type-safe APIs
- TypeScript - Static type checking
- Turborepo - High-performance build system
- Bun - Fast all-in-one JavaScript runtime
peakmark/
├── apps/
│ └── web/ # Next.js application
│ ├── src/
│ │ ├── app/ # App router (Next.js 14)
│ │ │ ├── api/ # API routes
│ │ │ │ ├── badge/
│ │ │ │ │ └── route.ts # Badge generation endpoint
│ │ │ │ └── trpc/
│ │ │ │ └── [trpc]/
│ │ │ │ └── route.ts # tRPC API handler
│ │ │ ├── editor/
│ │ │ │ └── page.tsx # Badge editor page
│ │ │ ├── public/ # Public assets
│ │ │ │ └── favicon_io/ # Favicon files
│ │ │ ├── layout.tsx # Root layout
│ │ │ ├── page.tsx # Home page
│ │ │ └── og.tsx # OpenGraph image
│ │ │
│ │ ├── components/ # React components
│ │ │ ├── badgeStyles/ # Badge style preset components
│ │ │ │ ├── BadgeStylePresetPanel.tsx
│ │ │ │ ├── FlatStylePreset.tsx
│ │ │ │ ├── FlatSquareStylePreset.tsx
│ │ │ │ ├── RoundedStylePreset.tsx
│ │ │ │ ├── PlasticStylePreset.tsx
│ │ │ │ ├── FoldedStylePreset.tsx
│ │ │ │ └── ForTheBadgeStylePreset.tsx
│ │ │ ├── editor/ # Editor panel components
│ │ │ │ ├── CustomizePanel.tsx
│ │ │ │ └── PreviewPanel.tsx
│ │ │ ├── ui/ # shadcn/ui components
│ │ │ │ ├── button.tsx
│ │ │ │ ├── card.tsx
│ │ │ │ ├── input.tsx
│ │ │ │ ├── select.tsx
│ │ │ │ ├── slider.tsx
│ │ │ │ └── ... # More UI components
│ │ │ ├── BadgeEditor.tsx # Main badge editor
│ │ │ ├── BadgeGallery.tsx # Badge gallery view
│ │ │ ├── BadgeCard.tsx # Individual badge card
│ │ │ ├── BadgeSVG.tsx # SVG badge renderer
│ │ │ ├── BadgeFromQuery.tsx # Query-based badge
│ │ │ ├── AdvancedBadgeSettings.tsx
│ │ │ ├── SegmentEditor.tsx # Badge segment editor
│ │ │ ├── IconPicker.tsx # Icon selection component
│ │ │ ├── Header.tsx # Site header
│ │ │ ├── HeroSection.tsx # Landing hero section
│ │ │ └── ... # Additional components
│ │ │
│ │ ├── data/ # Static data
│ │ │ ├── badgeIcons.ts # Icon definitions
│ │ │ └── seedBadges.ts # Sample badges
│ │ │
│ │ ├── hooks/ # Custom React hooks
│ │ │ ├── use-badge-query.ts # Badge query hook
│ │ │ ├── use-mobile.tsx # Mobile detection
│ │ │ └── use-toast.ts # Toast notifications
│ │ │
│ │ ├── lib/ # Utility libraries
│ │ │ ├── badgeStylePresets.ts # Style preset definitions
│ │ │ ├── badgeUrlGenerator.ts # URL generation logic
│ │ │ └── utils.ts # General utilities
│ │ │
│ │ ├── types/ # TypeScript types
│ │ │ └── badge.ts # Badge type definitions
│ │ │
│ │ ├── utils/ # Helper utilities
│ │ │ └── trpc.ts # tRPC client setup
│ │ │
│ │ └── index.css # Global styles
│ │
│ ├── components.json # shadcn/ui config
│ ├── next.config.ts # Next.js configuration
│ ├── postcss.config.mjs # PostCSS config
│ ├── tsconfig.json # TypeScript config
│ └── package.json # Web app dependencies
│
├── packages/
│ ├── api/ # tRPC API layer
│ │ ├── src/
│ │ │ ├── routers/
│ │ │ │ └── index.ts # API route definitions
│ │ │ ├── context.ts # tRPC context
│ │ │ └── index.ts # API entry point
│ │ ├── package.json
│ │ └── tsconfig.json
│ │
│ ├── db/ # Database package
│ │ ├── prisma/
│ │ │ └── schema/
│ │ │ └── schema.prisma # Database schema
│ │ ├── src/
│ │ │ └── index.ts # Prisma client export
│ │ ├── prisma.config.ts # Prisma configuration
│ │ ├── package.json
│ │ └── tsconfig.json
│ │
│ ├── config/ # Shared configurations
│ │ ├── tsconfig.base.json # Base TypeScript config
│ │ └── package.json
│ │
│ └── env/ # Environment validation
│ ├── src/
│ │ ├── server.ts # Server env variables
│ │ └── web.ts # Client env variables
│ ├── package.json
│ └── tsconfig.json
│
├── bts.jsonc # Better-T-Stack config
├── Docker # Docker configuration
├── index.html # HTML entry
├── turbo.json # Turborepo configuration
├── tsconfig.json # Root TypeScript config
├── vercel.json # Vercel deployment config
├── package.json # Root package.json
└── README.md # This file
bun run dev # Start development server (all apps)
bun run dev:web # Start only web appbun run build # Build all applications
bun run build:web # Build only web appbun run check-types # Check TypeScript types across all packages
bun run lint # Run ESLintPeakmark supports multiple badge style presets:
- Flat - Clean, modern flat design
- Flat-Square - Flat design with sharp corners
- Rounded - Smooth rounded corners
- Plastic - Glossy, 3D-like appearance
- Folded - Unique folded corner effect
- For-The-Badge - Bold, attention-grabbing style
- Custom - Create your own unique style
NEXT_PUBLIC_APP_URL- Application URL
NODE_ENV- Environment mode (development/production)PORT- Custom port (default: 3001)
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License.
- Built with Better-T-Stack
- UI components from shadcn/ui
- Powered by the amazing open-source community
Made with ❤️ using TypeScript