# 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

```bash
# Install dependencies
npm install

# Start development server
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) to view your dev tool platform.

### Production Build

```bash
# 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:

```tsx
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:

```typescript
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:

```tsx
// 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

```tsx
// 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

```tsx
// 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

```tsx
// 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:

```env
# 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:

```tsx
// 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:

```json
{
  "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
```tsx
// Connect to GitHub API
const octokit = new Octokit({
  auth: process.env.GITHUB_TOKEN,
})
```

### Database Integration
```tsx
// Prisma ORM example
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()
```

### Real-time Features
```tsx
// 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](https://github.com/hanzoai/templates)