DevToolsHub

Built a one-stop Dev Tools Hub during a no-code hackathon ‘cause I was sick of juggling 12 open sites just to convert PX to REM or check DNS.

Comment

Inspiration

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for DevToolsHub

🚀 DevToolsHub

✨ Inspiration

As a dev, I was tired of juggling 10 different tabs just to do basic stuff like converting PX to REM, cropping an image, or checking DNS.
It slowed me down and broke my flow.
So I built DevToolsHub — a central place for all the dev utilities I actually use, every day.

⚙️ What it does

DevToolsHub is a developer's Swiss Army knife — a hub that combines essential tools into a single, clean interface.

🔧 Tools included:

  • PX to REM Converter – for clean, responsive design
  • Clamp Generator – fluid typography without math headaches
  • Color Picker – extract color codes from any image
  • Image Converter – convert between AVIF, PNG, JPG, JPEG
  • Image Cropper – resize and format for web/social
  • DNS Lookup – deep dive into domain records
  • Domain Analyzer – find hosting & infrastructure details
  • Glassmorphism Generator – modern UI styling in 1-click
  • Neumorphism Generator – soft UI effects made simple
  • Gradient Generator – design stunning CSS gradients
  • Contrast Checker – check accessibility contrast
  • Typescale Generator – create scalable font systems

🛠 How we built it

  • Frontend: Built using React
  • APIs:
    • Used Google APIs for color and image extraction
    • Web APIs for DNS lookups and image conversions
  • Bolt: For UI structure and form handling
  • Optimized for performance and accessibility
  • Hosted on Insert Hosting Platform

😤 Challenges we ran into

  • Managing multiple utilities under one UX without clutter
  • Handling cross-browser image upload/conversion
  • DNS and domain analysis with proper error handling
  • Building accessibility features (e.g., contrast, type scaling)

🏆 Accomplishments we're proud of

  • Built an actual useful toolset — not just a concept
  • Delivered a polished MVP using React + APIs
  • Smooth, intuitive UX despite 10+ tool integrations
  • Solved a real pain point we face as devs

📚 What we learned

  • The best products come from solving your own pain
  • Even simple tools need good UI/UX to shine
  • Accessibility isn't optional — it’s essential
  • Web APIs are super powerful when used right

🔮 What's next for DevToolsHub

  • Add more dev tools (JSON formatter, Regex tester, SVG cleaner)
  • Allow users to save tool preferences/settings
  • Build a Chrome Extension version
  • Add Dark Mode + Full keyboard support
  • Possibly open-source it for the dev community 💙

🚀 Try it now

🔗 https://delightful-yeot-24ed8f.netlify.app/ 🛠️ One hub. All your dev tools. Built for speed.

Share this project:

Updates