QuickTools — Dev Army Knife for Everyday Digital Tasks

A production-ready, modular Next.js full-stack application featuring 21 daily-use utilities for developers and everyday users.

🚀 Features

• 21 Utility Tools across 5 categories:

  • Finance (4): Bill Splitter, Tip Calculator, EMI Calculator, Currency Converter
  • Security (3): Password Generator, Hash Generator, UUID Generator
  • Dev Tools (5): JSON Formatter, Base64 Encoder/Decoder, Timestamp Converter, Regex Tester, Color Converter
  • Utilities (4): Unit Converter, Age Calculator, Percentage Calculator, BMI Calculator
  • Everyday (5): QR Code Generator, Text Case Converter, Word Counter, URL Encoder/Decoder, Text Summarizer

• Modern UI

  • Clean, responsive design
  • Dark/Light mode toggle
  • TailwindCSS styling
  • shadcn/ui inspired components

• Search & Filter

  • Real-time search across all tools
  • Filter by category
  • Responsive grid layout

• Developer Experience

  • Type-safe TypeScript
  • Modular component architecture
  • Plugin-style tool registration
  • Easy to add new tools

📋 Tech Stack

• Framework: Next.js 16.1.6 (App Router)
• Language: TypeScript
• Styling: TailwindCSS 4 + PostCSS
• UI Library: shadcn/ui inspired components
• Utilities: lucide-react, sonner (notifications), crypto-js, qrcode
• Package Manager: npm

🛠️ Installation

Prerequisites

• Node.js 18+
• npm or yarn

Setup

# Clone the repository
git clone <repo-url>
cd quick-tools

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

The app will be available at http://localhost:3000

📁 Project Structure

quick-tools/
├── app/
│   ├── components/          # Reusable UI components
│   │   ├── Button.tsx
│   │   ├── Card.tsx
│   │   ├── Input.tsx
│   │   └── CopyButton.tsx
│   ├── lib/
│   │   ├── tool-registry.ts # Tool metadata definitions
│   │   └── tool-loader.ts   # Tool loading and registration
│   ├── tools/               # Individual tool components
│   │   ├── BillSplitter.tsx
│   │   ├── PasswordGenerator.tsx
│   │   ├── JSONFormatter.tsx
│   │   ├── QRCodeGenerator.tsx
│   │   └── ... (15 tools total)
│   ├── types/               # TypeScript types
│   │   └── tool.ts
│   ├── layout.tsx           # Root layout with dark mode
│   ├── page.tsx             # Landing page with search
│   ├── tool/
│   │   └── [slug]/
│   │       └── page.tsx     # Dynamic tool page
│   ├── globals.css          # Global styles
│   └── favicon.ico
├── public/
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── README.md

🛠️ Adding New Tools

To add a new tool, follow these steps:

1. Create Tool Component (app/tools/MyTool.tsx):

'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/app/components/Card';

export function MyTool() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>My Tool</CardTitle>
      </CardHeader>
      <CardContent>
        {/* Tool content */}
      </CardContent>
    </Card>
  );
}

2. Add Metadata to app/lib/tool-registry.ts:

export const myToolMetadata: ToolMetadata = {
  slug: 'my-tool',
  name: 'My Tool',
  description: 'Tool description',
  category: 'Utilities',
  icon: 'Settings'
};

3. Register Tool in app/lib/tool-loader.ts:

import { MyTool } from '@/app/tools/MyTool';
import { myToolMetadata } from '@/app/lib/tool-registry';

export const tools: Tool[] = [
  // ... existing tools
  { metadata: myToolMetadata, component: MyTool },
];

🎨 Component API

Button Component

<Button variant="primary" | "secondary" | "outline" | "ghost" size="sm" | "md" | "lg">
  Click me
</Button>

Card Component

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>
    Content here
  </CardContent>
</Card>

Input Component

<Input 
  label="Label"
  type="text"
  placeholder="Placeholder"
  error="Error message"
  helpText="Help text"
/>

CopyButton Component

<CopyButton text="Text to copy" label="Copy" />

🌙 Dark Mode

Dark mode is toggled via a button in the header. The preference is stored locally and applied to the entire application.

📱 Responsive Design

• Mobile-first approach
• Responsive grid layouts
• Mobile-optimized search and filters
• Touch-friendly button sizes

🚀 Performance

• Server-side rendering where applicable
• Code splitting per route
• Optimized imports
• Zero external API calls
• Client-side only operations

📝 Available Tools

Finance (4 tools)

1. Bill Splitter - Split bills equally among people
2. Tip Calculator - Calculate tips and totals
3. EMI Calculator - Calculate loan EMI
4. Currency Converter - Convert between major currencies (USD, EUR, GBP, INR, JPY, AUD)

Security (3 tools)

1. Password Generator - Generate strong passwords
2. Hash Generator - Generate MD5, SHA256, SHA512, SHA1 hashes
3. UUID Generator - Generate UUID v4

Dev Tools (5 tools)

1. JSON Formatter - Format and validate JSON
2. Base64 Encoder/Decoder - Encode/decode Base64
3. Timestamp Converter - Convert Unix timestamps
4. Regex Tester - Test regex patterns
5. Color Converter - Convert between HEX, RGB, HSL colors

Utilities (4 tools)

1. Unit Converter - Convert length, weight, temperature
2. Age Calculator - Calculate age from DOB
3. Percentage Calculator - Calculate percentages
4. BMI Calculator - Calculate Body Mass Index with metric/imperial support

Everyday (5 tools)

1. QR Code Generator - Generate and download QR codes
2. Text Case Converter - Convert text to different cases
3. Word Counter - Count words, characters, sentences
4. URL Encoder/Decoder - Encode and decode URLs and query parameters
5. Text Summarizer - Analyze text with word frequency, reading time, and statistics

🔒 Security

• No backend required
• No authentication
• No database
• All processing done client-side
• No external API calls
• Secure password generation
• Hash generation using crypto-js

📄 License

MIT

🤝 Contributing

Contributions are welcome! Please feel free to submit pull requests or open issues.

💡 Future Enhancements

• Offline support (PWA)
• Tool keyboard shortcuts
• Favorites/bookmarks
• Import/export settings
• More tools categories
• Localization support
• Tool history/recent usage

---

Made with ❤️ for developers and everyday users