DevTools

🚀 About

This project was created with the assistance of AI, specifically Claude 3.5 Sonnet, to showcase the potential of AI in software development. It's a Next.js application that serves as a comprehensive toolkit for developers, featuring a collection of useful tools and resources. The development process was further enhanced using Cursor Composer as the AI-powered code editor, demonstrating the synergy between AI assistants and intelligent development environments.

🛠️ Project Overview

This Developer's Toolkit is a Next.js application built with TypeScript, Tailwind CSS, and shadcn/ui. It demonstrates modern web development practices, including:

• ✅ Next.js App Router for efficient routing and server-side rendering
• ✅ TypeScript for type-safe code
• ✅ Tailwind CSS for responsive, utility-first styling
• ✅ shadcn/ui for pre-built, customizable UI components
• ✅ Server Components for improved performance
• ✅ API routes using Next.js Route Handlers

The project aims to inspire developers by showcasing how AI can assist in creating well-structured, efficient, and feature-rich applications.

🧰 Tools Included

The Developer's Toolkit includes the following tools:

1. JSON Formatter 📝

   • Validate and format JSON data
   • View Prompt

2. HTTP Status Code Reference ✔️

   • Reference HTTP status codes
   • View Prompt

3. Base64 Encoder/Decoder 🔐

   • Convert text to and from Base64 encoding
   • View Prompt

4. SVG Previewer 🖼️

   • Paste SVG code to instantly preview the rendered image
   • View Prompt

5. Hash Generator 📘

   • Generate various hash types from input text
   • View Prompt

6. URL Encoder/Decoder 🔗

   • Encode/decode URL-unsafe characters
   • View Prompt

7. Color Generator 🎨

   • Interactive color selection with various color models
   • Note: This tool was created by Cursor Composer with various texts.

8. Image Format Converter 🖼️

   • Convert images between different formats like PNG, JPG, WebP
   • View Prompt

9. CSS Filter Generator 💅

   • Create and preview CSS filters
   • View Prompt

10. Color Converter 🎭

    • Convert between color formats (HEX, RGB, HSL)
    • View Prompt

11. Color Contrast Checker 👁️

    • Check contrast ratios for accessibility
    • View Prompt

12. UUID Generator 🆔

    • Generate random UUIDs/GUIDs
    • View Prompt

13. IP Address Lookup 🌐

    • Look up IP address information
    • View Prompt

14. Regex Tester 🔍

    • Test regular expressions
    • View Prompt

15. Timestamp Converter 🕒

    • Convert between various date/time formats
    • View Prompt

16. JSON to CSV Converter 📊

    • Convert JSON data to CSV format
    • View Prompt

17. JSON to YAML Converter 📄

    • Convert between JSON and YAML formats with ease
    • View Prompt

18. XML Formatter/Validator 📋

    • Format and validate XML documents
    • View Prompt

19. Markdown Previewer 📝

    • Live preview of Markdown with syntax highlighting
    • View Prompt

Each tool is designed to be user-friendly and efficient, catering to common developer needs. The linked JSON files contain the prompts used to generate each tool, providing insight into the AI-assisted development process.

🚀 Getting Started

To run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

📚 Learn More

To learn more about the technologies used in this project:

• Next.js Documentation - learn about Next.js features and API.
• TypeScript Documentation - explore TypeScript.
• Tailwind CSS Documentation - learn about Tailwind CSS.
• shadcn/ui Documentation - explore the UI component library.

🤝 Contributing

Contributions to improve and expand the Developer's Toolkit are welcome! Please feel free to submit issues and pull requests.

Adding a New Tool

To add a new tool to the collection, follow these steps:

1. Metadata: Create a new .json file in the prompts/ directory (e.g., prompts/uuid-generator.json). This file defines the tool's metadata for the home page listing. It should contain:

   {
     "name": "UUID Generator", // Display name on the home page card
     "description": "Generate different versions of UUIDs", // Description on the home page card
     "href": "/uuid-generator" // URL path for the tool (must match directory name)
   }

2. Routing: Create a new directory inside app/(home)/ with a name matching the href value (without the leading slash), e.g., app/(home)/uuid-generator/.
3. Page Component: Inside the new tool directory, create a page.tsx file. This is a simple wrapper component that imports and renders your main tool component. Example:

   // app/(home)/uuid-generator/page.tsx
   import { UuidGenerator } from "./UuidGenerator";
   // Optional: import { metadata } from "./metadata";
   
   // Optional: export { metadata };
   
   export default function UuidGeneratorPage() {
     return <UuidGenerator />;
   }

4. (Optional) Metadata Export: For better SEO, create a metadata.ts or .tsx file in the tool directory and export a metadata object following Next.js conventions.
5. Tool Component: Create your main tool component file (e.g., app/(home)/uuid-generator/UuidGenerator.tsx).
   • Add the "use client"; directive at the top.
   • Implement the tool's UI using components from @/components/ui/ (shadcn/ui).
   • Use React hooks (useState, useCallback, useEffect, useTransition) for state management and logic.
   • Use the useToast hook and <Toaster /> component for user feedback (like copy actions).
   • Ensure the component is responsive and accessible (use appropriate ARIA attributes, semantic HTML, etc.).
6. Home Page: The home page automatically picks up the new tool from the prompts/ directory. No manual update is needed there.

📄 License

This project is open-source and available under the MIT License.

🙏 Acknowledgements

Special thanks to the AI assistants and the open-source community for making this project possible. This project demonstrates the potential of AI in assisting developers and creating robust applications.

👨‍💻 Creator

This project was created and maintained by Goksel Yesiller.

---

Made with ❤️ and AI by MrYesiller