README.bak.md

DevTool Platform Template

A developer tools platform template built with Next.js 15, TypeScript, and @hanzo/ui components for creating modern development utilities.

Features

• ✨ Built with @hanzo/ui component library (shadcn/ui based)
• 🎨 Monochromatic color scheme with developer-focused aesthetics
• 📱 Fully responsive design (mobile, tablet, desktop)
• 🌙 Dark mode support with next-themes
• 🚀 Next.js 15 App Router with React 19
• 🛠️ Developer-centric components
• ⚡ TypeScript strict mode enabled
• 🎯 Performance optimized for tool interfaces

Quick Start

Installation

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:3000 to view your dev tool platform.

Production Build

# Create production build
npm run build

# Start production server
npm start

Project Structure

devtool/
├── app/                  # Next.js App Router
│   ├── layout.tsx       # Root layout with theming
│   └── page.tsx         # Landing page
├── components/          # React components
│   └── sections/        # Page sections
│       ├── hero.tsx     # Hero with CTA
│       └── features.tsx # Feature cards
├── lib/                 # Utilities and config
│   └── site.ts          # Site configuration
├── public/              # Static assets
└── package.json         # Dependencies

Component Usage

All components are imported from @hanzo/ui with developer-friendly styling:

import { Button, Card, CardContent, CardHeader, CardTitle } from '@hanzo/ui/components'

// Developer-styled button with monospace font
<Button size="lg" className="font-mono">
  npm install @your-tool
</Button>

// Feature card with technical styling
<Card className="border-2 hover:border-black dark:hover:border-white">
  <CardHeader>
    <CardTitle className="font-mono">Feature Name</CardTitle>
  </CardHeader>
  <CardContent>
    Technical description here
  </CardContent>
</Card>

Customization

Site Configuration

Edit lib/site.ts to customize your dev tool details:

export const siteConfig = {
  name: "Your Tool Name",
  tagline: "Your Tool Tagline",
  description: "What your tool does",
  url: "https://your-tool.com",
  features: [
    "Feature 1",
    "Feature 2",
    "Feature 3",
    "Feature 4"
  ]
}

Styling

The template uses a monochromatic color scheme perfect for developer tools:

• Primary: Black (#000000)
• Secondary: Gray (#666666)
• Accent: Dark gradients for depth
• Code: Monospace fonts throughout
• Borders: High contrast for clarity

Adding Tool Pages

Create new pages for different tools:

// app/editor/page.tsx
import { Button, Card } from '@hanzo/ui/components'

export default function EditorPage() {
  return (
    <div className="container mx-auto py-12">
      <h1 className="text-4xl font-mono font-bold mb-8">
        Code Editor
      </h1>
      {/* Your editor implementation */}
    </div>
  )
}

Developer Features

Code Display Components

// Code block with syntax highlighting
<pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
  <code className="language-javascript">
    {codeString}
  </code>
</pre>

// Terminal-style output
<div className="bg-black text-green-400 p-4 font-mono text-sm">
  $ npm install your-package
  <br />
  ✓ Installation complete
</div>

API Integration

// Example API endpoint structure
// app/api/tools/[tool]/route.ts
export async function POST(request: Request) {
  const data = await request.json()
  // Process tool request
  return Response.json({ result })
}

Keyboard Shortcuts

// Example keyboard shortcut handler
useEffect(() => {
  const handleKeyPress = (e: KeyboardEvent) => {
    if (e.metaKey && e.key === 'k') {
      // Open command palette
    }
  }
  document.addEventListener('keydown', handleKeyPress)
  return () => document.removeEventListener('keydown', handleKeyPress)
}, [])

Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm start	Start production server
npm run lint	Run ESLint

Tool Categories

Supported Tool Types

• Code Generators: Templates, boilerplate, snippets
• Testing Tools: Unit tests, integration tests, E2E
• Build Tools: Bundlers, compilers, transpilers
• Documentation: API docs, README generators
• Analysis Tools: Linters, formatters, profilers
• Deployment: CI/CD, containerization, monitoring

Environment Variables

Create a .env.local file for configuration:

# Example environment variables
NEXT_PUBLIC_API_URL=https://api.your-tool.com
NEXT_PUBLIC_GITHUB_TOKEN=ghp_...
DATABASE_URL=postgresql://...
REDIS_URL=redis://...

Responsive Design

The template adapts to different screen sizes:

// Responsive layout
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
  {/* Tool cards */}
</div>

// Responsive navigation
<nav className="flex flex-col md:flex-row gap-4">
  {/* Navigation items */}
</nav>

TypeScript

Strict mode is enabled for better type safety:

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  }
}

Performance Optimization

• Lazy loading for heavy components
• Code splitting by feature
• Optimized bundle size
• Service worker for offline support
• WebAssembly support for compute-intensive tasks

Integration Examples

GitHub Integration

// Connect to GitHub API
const octokit = new Octokit({
  auth: process.env.GITHUB_TOKEN,
})

Database Integration

// Prisma ORM example
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()

Real-time Features

// WebSocket connection
const ws = new WebSocket('wss://your-api.com')
ws.on('message', handleMessage)

Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

License

MIT

Support

For questions or issues, visit github.com/hanzoai/templates