🟢 Good First Issue: Add a New Tool to Dev Utilities Sandbox

[shamilahmdt]

🟢 Good First Issue: Add a New Tool to Dev Utilities Sandbox

Time: ~20–60 minutes

Difficulty: Beginner / Intermediate

Skill Level: First-time contributors welcome

🟢 Help expand the Dev Utilities Sandbox by creating a new offline developer tool and integrating it into the application.

---

⭐ Before You Start

If you enjoy the project and would like to contribute:

⭐ Star the repository

Every star helps support the project and future development.

Know someone who hasn't contributed to open source yet? Feel free to share this issue with them — it's designed to be beginner-friendly and a great way to get started.

---

🏷 Labels

good first issue · help wanted · feature · react · javascript · developer-tools · hacktoberfest

Tech Stack: React, Tailwind CSS

---

📌 Description

The Dev Utilities Sandbox is a growing collection of offline developer tools designed to help developers with everyday tasks directly in the browser.

We welcome contributions for any useful developer utility, not just the examples listed below. If you have an idea for a tool that would benefit developers and can run entirely client-side, feel free to build it and submit a Pull Request.

Some example ideas include:

• UUID / GUID Generator (Generate v4 UUIDs)

• JWT Decoder (Parse and display JWT headers & payloads offline)

• Hash Generator (Generate MD5, SHA-1, SHA-256, SHA-512 hashes)

• HTML Entity Encoder / Decoder (Convert special characters to HTML entities and vice versa)

• Color Converter & Picker (HEX, RGB, HSL conversions)

• Markdown Live Previewer (Render markdown to styled HTML offline)

These are only suggestions — contributors are free to implement their own utility ideas as long as:

• The tool provides value to developers.

• The functionality works correctly.

• The tool runs completely offline/client-side.

• The UI matches the existing Dev Utilities design system.

• The implementation follows the project's coding standards.

---

🎯 Tasks

1️⃣ Create a New Tool Component

Create your component file inside:

src/pages/DevUtilities/devutilities/

Example:

UuidGenerator.jsx

or

JwtDecoder.jsx

---

2️⃣ Register the Tool Card

Add your tool's details to the cards array in:

src/pages/DevUtilities/DevUtilities.jsx

Include:

• title

• description

• route path

• icon

Example:

{

  title: "UUID Generator",

  description: "Generate RFC4122-compliant UUIDs offline.",

  path: "/devutilities/uuid",

  icon: <YourIcon />,

}

---

3️⃣ Register the Route

Add the route inside:

src/App.jsx

Example:

import UuidGenerator from "./pages/DevUtilities/devutilities/UuidGenerator";



<Route

  path="/devutilities/uuid"

  element={<UuidGenerator />}

/>

---

4️⃣ Match Existing Design & Themes

Ensure your tool follows the existing Dev Utilities design patterns:

• Monochrome design system

• Dark mode support

• Responsive layouts

• Smooth transitions

• Consistent spacing and typography

[!TIP]

Existing utilities such as JsonFormatter.jsx and RegexTester.jsx are excellent references for structure, styling, responsiveness, and theme handling.

---

5️⃣ Keep Everything Client-Side

The utility should work completely offline whenever possible.

Examples:

✅ Local calculations

✅ Text transformations

✅ Encoding/decoding

✅ Hash generation

✅ Format conversion

Avoid requiring external APIs unless absolutely necessary.

---

✅ Expected Result

Users should be able to:

• Access the tool from the Dev Utilities dashboard

• Use the utility completely client-side

• Enjoy a polished UI that matches the rest of the project

• Use the tool seamlessly in both light and dark themes

---

🚀 Contribute Your Way

There are two ways you can contribute:

Option 1: Build & Open a Pull Request Directly

Have an idea for a useful developer utility?

1. Fork the repository

2. Build the tool

3. Test it thoroughly

4. Open a Pull Request

No need to wait for approval before getting started.

Option 2: Create Your Own Issue First

If you'd like to discuss your idea before building it:

1. Create a GitHub Issue describing your proposed utility

2. Gather feedback from maintainers and contributors

3. Build the feature

4. Open a Pull Request

5. Link your PR to the issue you created

Both approaches are completely welcome.

[!NOTE]

The tool examples listed in this issue are only suggestions, not restrictions. Contributors are encouraged to propose and build their own developer utility ideas.

---

✅ Submission Requirements

1. ⭐ Star the repository

2. 🍴 Fork the repository

3. 🌿 Create a branch:

git checkout -b feature/add-new-devutility-tool

4. Build and test your tool

5. Ensure the application runs correctly

6. Commit your changes

Example:

git commit -m "feat: add uuid generator utility"

7. Open a Pull Request targeting the main branch

---

🚀 Quick Info

| Category | Details |

| ---------- | ------------------------------- |

| Difficulty | Beginner / Intermediate |

| Time | ~20–60 mins |

| Focus | React Components & Routing |

| Tech | React, JavaScript, Tailwind CSS |

| Good For | First-time Contributors |

---

💡 Why This Is A Great First Issue

This issue helps contributors practice:

• React component development

• State management

• Client-side utility creation

• Routing with React Router

• Theme-aware UI development

• Responsive design

• Open-source contribution workflows

Every new utility makes the Dev Utilities Sandbox more useful for developers around the world.

[Samanyu-dev]

hi @shamilahmdt, I want to work on this issue. Could you please assign me this issue?

[github-actions]

Hi @Samanyu-dev,

Thank you for your interest in this issue and for contributing to the project!

You have been successfully assigned. You may begin working on it immediately.

Please note: To keep the repository active and ensure issues are addressed in a timely manner, assignments will automatically expire after 48 hours if the issue remains open. If you need an extension or have any questions, please leave a comment here to notify the maintainers.

Happy coding!