A modern, responsive web application built with Next.js that provides essential developer utilities in one convenient location. Features a clean interface with dark/light theme support and intuitive search functionality.
- �️ Essential Developer Tools - A growing collection of commonly used utilities including encoding/decoding, hashing, and security tools
- 🎨 Dark/Light Theme Support - Toggle between themes with system preference detection
- 🔍 Quick Search - Fast tool search with keyboard shortcuts (⌘K / Ctrl+K)
- 📱 Responsive Design - Optimized for desktop, tablet, and mobile devices
- ⚡ Fast Performance - Built with Next.js 15 and Turbopack for optimal speed
- Node.js 18+
- pnpm (recommended) or npm/yarn
- Clone the repository:
git clone https://github.com/jobacx/dev-tools.git
cd dev-tools- Install dependencies:
pnpm install
# or
npm install
# or
yarn install- Start the development server:
pnpm dev
# or
npm run dev
# or
yarn dev- Open http://localhost:3000 in your browser
- Next.js 15 - React framework with App Router
- React 19 - User interface library
- TypeScript - Type-safe JavaScript
- Tailwind CSS 4 - Utility-first CSS framework
- Shadcn UI - Accessible component primitives
- Lucide React - Beautiful icon library
- next-themes - Theme switching
src/
├── app/ # Next.js App Router
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Home page
│ ├── api/ # API routes
│ │ ├── bcrypt/ # Bcrypt endpoints
│ │ └── jwt/ # JWT endpoints
│ └── tools/ # Tool pages
│ ├── layout.tsx # Tools layout
│ ├── base64/ # Base64 tool
│ ├── bcrypt/ # Bcrypt tool
│ └── jwt/ # JWT tool
├── components/ # Reusable components
│ ├── ui/ # UI component library
│ ├── theme-provider.tsx # Theme context
│ └── theme-toggle.tsx # Theme switcher
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
└── types/ # TypeScript definitions
pnpm dev- Start development server with Turbopackpnpm build- Build production bundlepnpm start- Start production serverpnpm lint- Run ESLint
please create a new feature tools in this project.
name:
requirements:
- include analyzing of existing tools for design ui pattern
- adding of new config in @tools-config.ts
functionalities:
-
Future tools and features planned:
- URL Encoder/Decoder - Encode and decode URLs and query parameters
- Color Converter - Convert between different color formats (HEX, RGB, HSL, etc.)
- JSON Formatter/Validator - Format, validate, and minify JSON
- Hash Generator - Generate MD5, SHA1, SHA256, and other hashes
- QR Code Generator - Create QR codes for text, URLs, and data
- Regular Expression Tester - Test and debug regex patterns
- SQL Formatter - Format and beautify SQL queries
- XML/HTML Formatter - Format and validate XML/HTML
- Timestamp Converter - Convert between different timestamp formats
- Lorem Ipsum Generator - Generate placeholder text
- Markdown Preview -
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js team for the amazing framework
- Shadcn UI for components
- Tailwind CSS for utility-first styling
- Lucide for beautiful icons
🌐 Visit Live Demo | 📝 Report Bug | ✨ Request Feature
Made with ❤️ by jobacx