👋 About PlainUtils

Welcome to PlainUtils — a minimalist, open-source toolbox 🧰 for developers, tinkerers, and keyboard wizards.

No accounts. No fluff. Just fast, useful web tools.

⚙️ Tech Stack

• Next.js – SSR + SSG for speed and SEO. Tools live under /tools/.
• React – Hooks, interactivity, component logic.
• Tailwind CSS – Utility-first styling for responsive UI.
• Lucide Icons – Clean SVG icon set used across the app.
• Dark Mode – Controlled via React context, stored in localStorage.

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

🗂️ File Structure

Each tool lives in /pages/tools/ and is auto-routed via Next.js.

pages/
├── tools/
│   ├── word-counter.js
│   ├── json-formatter.js
│   └── base64.js
├── about.js
├── index.js
components/
├── Layout.js
├── DarkModeToggle.js
lib/
├── iconMap.js

🧱 Reusable Components

• <Layout /> – Provides consistent page layout with sidebar + footer.
• <DarkModeToggle /> – React + CSS variables + localStorage.

const [isDark, setIsDark] = useState(() => {
  return localStorage.getItem('theme') === 'dark';
});

🚀 Deployment

• Platform: Deployed via Netlify
• CI/CD: Auto-push from GitHub on commit to main.
• Stack: Fully static — no backend needed.

{
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start"
  }
}

💡 Philosophy

• Tools should load in under 1 second ⏱️
• No JavaScript bloat. No tracking. No nonsense.
• Mobile responsive, keyboard friendly, and built for devs.

🤝 Contribute

Want to add a tool or improve one? Star the repo on GitHub and open an issue or PR.

Or drop ideas to plainutils@pingryte.com