Built UtilCraft: 15+ Free Web Tools in One Place

🤔 The Problem

You need to format JSON. What do you do?

1. Google "JSON formatter"
2. Click random site
3. Deal with ads and slow loading
4. Use tool
5. Need something else? Start over...

There had to be a better way.

💡 The Solution

I built UtilCraft - all your everyday tools in one place.

🎯 What's Inside

15+ Essential Tools

• 🖼️ Image Resizer - Batch process, instant results
• 📝 JSON Formatter - Validate, format, minify
• 🔐 Password Generator - Cryptographically secure
• 🎨 Color Converter - HEX ↔ RGB ↔ HSL ↔ CMYK
• 📱 QR Generator - URL, WiFi, vCard
• ⚡ Base64 Encoder - Text & files
• 🔗 URL Encoder - Safe URL formatting
• 🆔 UUID Generator - Bulk generation
• 📊 Word Counter - Real-time stats
• 🧮 Calculator - Scientific mode
• 📏 Unit Converter - Length, weight, temp
• 📝 Markdown Editor - Live preview

5+ Mini Games

Quick mental breaks without leaving the site:

• 2048, Snake, Tetris, Memory Match, Tic-Tac-Toe

🚀 Why It's Different

1. Privacy First

Everything runs in your browser:

// Images never leave your device
const canvas = document.createElement('canvas')
// Process locally, no upload!

Your files = Your device only.

2. Actually Fast

• No ads slowing you down
• Instant processing
• Works offline (PWA ready)

3. Works Everywhere

• 📱 Mobile optimized
• 🌏 7 languages (ko/en/ja/es/zh/pt/fr)
• 🌙 Dark mode included

🛠️ Tech Stack

Built with modern tools for maximum performance:

Next.js 14 (App Router)
TypeScript (type safety)
Tailwind CSS (styling)
Radix UI (components)
Self-hosted on Oracle Cloud

Why Next.js 14?

Performance wins:

• Server Components for static content
• Client Components for interactive tools
• Code splitting per route
• <50KB initial bundle

Result: Lightning fast, even on slow connections.

📈 Some Cool Technical Bits

Dynamic Loading

// Only load what you need
const ImageResize = dynamic(
  () => import('@/components/tools/image-resize'),
  { loading: () => <Spinner /> }
)

Multi-Language Support

// Easy internationalization
lib/translations/
├── ko.ts  // Korean
├── en.ts  // English
├── ja.ts  // Japanese
└── ...    // and more

Client-Side Processing

// Password generation (secure!)
const generatePassword = (length: number) => {
  const array = new Uint8Array(length)
  crypto.getRandomValues(array) // Browser crypto API
  return convertToPassword(array)
}

💪 Challenges & Solutions

Challenge 1: Performance

Problem: Tools loading slowly
Solution: Code splitting + dynamic imports
Result: Each tool loads independently

Challenge 2: Mobile UX

Problem: Complex tools on small screens
Solution: Mobile-first design from day 1
Result: Works great on phones

Challenge 3: Offline Usage

Problem: Need internet for every tool
Solution: PWA + client-side processing
Result: Works without connection

🎓 What I Learned

Next.js 14 is production-ready

• App Router is stable
• Server/Client split is powerful
• File-based routing scales well

Performance matters more than features

• Fast > Feature-rich
• 1s load time = Happy users
• Bundle size affects everything

Privacy is a feature

• Users appreciate no uploads
• Client-side = zero server costs
• Simpler infrastructure

🚀 What's Next

Continuously improving based on user feedback. Have ideas for new tools or features? Let me know!

🎁 Try It Yourself

Live site: utilcraft.com

It's completely free, no signup required.

💬 Your Feedback

What would make this more useful for you?

• Missing a tool you use often?
• Found a bug?
• Feature suggestion?

Drop a comment! I'm actively developing this and would love your input.

---

Built with ❤️ by a solo developer who got tired of switching between websites.

#webdev #nextjs #typescript #sideproject