A curated collection of essential development tools and utilities, all in one place. This hub provides quick access to popular web development tools, making your workflow more efficient and productive.
- Modern UI: Built with React and Flowbite, featuring a clean and responsive design
- Dark Mode Support: Seamless dark/light theme switching
- Curated Tools: Carefully selected development tools for various needs
- Direct Access: One-click access to popular development utilities
- Responsive Design: Works perfectly on all device sizes
Create, customize, and export beautiful CSS gradients with live preview and code generation. Perfect for web designers and developers who need to create smooth color transitions and background effects.
Generate harmonious color schemes with complementary, analogous, and triadic color combinations. Ideal for designers and developers who need to create cohesive color palettes for their projects.
Design and customize box shadows with an intuitive interface. Features live preview and CSS code export, making it easy to create depth and elevation effects in your web designs.
Create stunning geometric patterns and backgrounds with customizable shapes, colors, and arrangements. Perfect for creating unique textures and visual elements for your projects.
A minimalist task management app with drag-and-drop functionality. Organize your tasks with categories and track your progress efficiently. Great for project management and personal productivity.
Generate, customize, and download QR codes with various styles, colors, and error correction levels. Useful for marketing, product packaging, and digital content sharing.
Transform text descriptions into unique images using AI. Create custom artwork, illustrations, and visual content with style customization and export options.
Test and preview email templates with real-time rendering and spam score checking. Essential for email marketers and developers who need to ensure their emails look perfect across different clients.
Create modern glass-like UI elements with customizable blur, transparency, and border effects. Perfect for creating contemporary, frosted glass interfaces that are popular in modern web design.
Advanced color selection tool with hex, RGB, and HSL values. Includes color harmony suggestions and advanced color manipulation features for precise color work.
Create interactive charts and graphs with various types (line, bar, pie) and customizable data visualization. Ideal for data analysts and developers who need to present data in a clear, visual format.
Format, validate, and visualize JSON data with tree view and syntax highlighting. Essential for developers working with JSON data structures and APIs.
- Node.js (v18 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/yourusername/devtools-hub.git
cd devtools-hub- Install dependencies:
npm install
# or
yarn install- Start the development server:
npm run dev
# or
yarn dev- Open http://localhost:5173 in your browser
- React - Frontend framework
- TypeScript - Type safety
- Flowbite - UI components
- Tailwind CSS - Styling
- Vite - Build tool
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLintnpm run format- Format code with Prettier
- ARCHITECTURE.md - Project architecture and design patterns
- CONTRIBUTING.md - Guidelines for contributors
Contributions are welcome! Feel free to:
- 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 - see the LICENSE file for details.
- All the amazing tools and services linked in this hub
- The open-source community for their continuous support
- Flowbite for the beautiful UI components
Made with ❤️ by hugofsp93