A comprehensive web-based developer tools platform with smart paste auto-detection, 47+ professional utilities, and AI assistance.
Automatically detects and formats various data types:
- JSON, JWT, Base64, URLs
- Timestamps, Hex colors
- XML, YAML, and more
Comprehensive suite organized into categories:
- JSON Formatter
- Base64 Encoder/Decoder
- URL Encoder/Decoder
- CSV Converter
- Markdown Converter
- YAML Converter
- XML Formatter
- Unit Converter
- Code Minifier
- Case Converter
- Text Statistics
- Text Encoder/Decoder
- Text Replacer
- Line Tools
- Text Splitter
- Character Counter
- Markdown to HTML
- Password Strength Checker
- SSL Certificate Analyzer
- Encryption/Decryption Tools
- HMAC Generator
- Certificate Decoder
- SQL Formatter
- Schema Visualizer (ERD)
- SQL Query Builder
- Connection String Builder
- Mock Data Generator
- File Checksum Calculator
- File Analyzer
- Secure ZIP Viewer
- Image Converter
- SVG Optimizer
- Grid Generator
- Color Palette Generator
- Color Converter
- Box Shadow Generator
- UUID Generator
- Hash Generator
- Lorem Ipsum Generator
- Password Generator
- QR Code Generator
- Cron Expression Builder
- HTTP Client with cURL generation
- Interactive 3D animated robot assistant
- Tool-specific help and guidance
- Multiple AI provider support (OpenAI, Claude, Gemini)
- Context-aware suggestions
- 🌓 Dark/Light theme support
- ⭐ Favorites system
- 📊 Usage tracking and analytics
- 🔐 User authentication
- 💾 Data persistence
- 📱 Fully responsive design
- React 18 with TypeScript
- Vite for fast development
- Tailwind CSS with shadcn/ui
- Framer Motion for animations
- TanStack Query for data fetching
- Wouter for routing
- Express.js with TypeScript
- PostgreSQL with Drizzle ORM
- Neon for database hosting
- OpenID Connect authentication
- Node.js 18+
- PostgreSQL database (or use Neon)
- Clone the repository:
git clone https://github.com/yourusername/devtools-hub.git
cd devtools-hub- Install dependencies:
npm install- Set up environment variables:
# Copy the example env file
cp .env.example .env
# Add your database URL and other secrets
DATABASE_URL=your_postgresql_url
SESSION_SECRET=your_session_secret
# Add AI provider keys as needed
OPENAI_API_KEY=your_openai_key
ANTHROPIC_API_KEY=your_anthropic_key
GEMINI_API_KEY=your_gemini_key- Push database schema:
npm run db:push- Start the development server:
npm run devThe app will be available at http://localhost:5000
devtools-hub/
├── client/ # React frontend
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ ├── pages/ # Page components
│ │ ├── hooks/ # Custom React hooks
│ │ └── lib/ # Utilities and helpers
├── server/ # Express backend
│ ├── routes/ # API routes
│ ├── storage.ts # Database operations
│ └── index.ts # Server entry point
├── shared/ # Shared types and schemas
│ └── schema.ts # Database schema
└── package.json # Dependencies and scripts
- Navigate to the home page
- Paste any data into the Smart Paste input
- The system automatically detects the format
- Click on suggested tools to process your data
- Browse tools by category in the sidebar
- Click on any tool to open it
- Input your data and configure options
- Copy or download the results
- Click the robot icon in the bottom right
- Ask questions about any tool
- Get help with data formatting
- Learn keyboard shortcuts and tips
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow the existing code style
- Write tests for new features
- Update documentation as needed
- Ensure all tools work offline
- Maintain responsive design
DevTools Hub uses a freemium model:
- 100 operations per day
- Access to all tools
- Basic AI assistance
- Unlimited operations
- API history persistence
- Custom AI providers
- Priority support
- Everything in Pro
- Team collaboration
- Admin dashboard
- API access
- All data processing happens locally in your browser
- No data is sent to servers without explicit consent
- User data is encrypted and secure
- SOC 2 compliant infrastructure
This project is licensed under the MIT License - see the LICENSE file for details.
- Built with ❤️ for developers worldwide
- Inspired by the need for better developer tools
- Thanks to all contributors and users
- Website: devtools-hub.com
- Email: support@devtools-hub.com
- Twitter: @devtoolshub
Made with ☕ and 💻 by developers, for developers