Built UtilCraft: 15+ Free Web Tools in One Place

Full-Moon — Thu, 16 Oct 2025 00:41:39 +0000

🤔 The Problem

You need to format JSON. What do you do?

Google "JSON formatter"
Click random site
Deal with ads and slow loading
Use tool
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

DEV Community: Full-Moon