Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Add a UUID Generator & Inspector tool (v4 and v7)

Đang mở
  • Có gì không ổn?
#83 4 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@harshit-exe-dev đang làm issue này rồi.

Từ ngày 19/10/2026.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
61/100
Loại issue
Tính năng
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
nextjs, react, typescript
Lĩnh vực
developer-experience, frontend, testing, tooling

Hướng nghiên cứu

Start with lib/tools.ts and the Tool interface, then use app/(tools)/base64/ as the route and UI reference; read the README's "Add a tool" section for the checklist. Implement and test pure UUID logic in lib/uuid.ts and lib/__tests__/uuid.test.ts, then build the route /uuid-generator and its client UI. Done means the scoped v4/v7 generation and inspection work, the listed tests pass, and npm run lint && npm run test && npm run build succeeds.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

enhancement good first issue hacktoberfest new tool

Generate random (v4) and time-ordered (v7, RFC 9562) UUIDs locally, and inspect a pasted UUID to see its version, its variant and, for v7, the timestamp inside it.

Route: /uuid-generator

Suggested registry values: title UUID Generator & Inspector, tagline Identifiers, heroHeading UUID Generator & Inspector with heroDim &, features ["UUID v4", "UUID v7", "Bulk", "Inspect", "No hyphens"].

Core logic in lib/uuid.ts

  • uuidV4(random: Uint8Array) and uuidV7(nowMs: number, random: Uint8Array). They take randomness and time as arguments so they're easy to test; the UI passes bytes from crypto.getRandomValues.
  • v7 layout: a 48-bit big-endian Unix timestamp in milliseconds, version bits 0111, variant bits 10, and the rest random
  • formatUuid(bytes, { uppercase, hyphens })
  • inspectUuid(text) returning { ok, version, variant, timestampMs? }, recognising the nil and max UUIDs; malformed input returns ok: false

v1 scope

  • Generate 1 to 100 UUIDs with a v4 / v7 toggle
  • Uppercase and no-hyphens toggles
  • Copy all
  • An inspector input

Out of scope for v1: v1, v3, v5, v6, ULID and nanoid (good follow-up issues).

Where to look

  • lib/tools.ts (the registry and the Tool interface)
  • app/(tools)/base64/ (a complete tool to copy the structure from)
  • The "Add a tool" section of the README

Acceptance criteria

  • Tests: correct version nibble and variant bits for v4 and v7, the v7 timestamp round-trips through inspectUuid for a fixed nowMs, two v7 UUIDs with increasing time sort in order, formatting options, malformed input rejected, and the nil UUID detected
  • UI as scoped above
  • The standard new-tool checklist below is complete

Standard new-tool checklist

Everything (home grid, metadata, JSON-LD, OG image, sitemap, manifest, command palette) is driven by the registry in lib/tools.ts, so a new tool is mostly one registry entry plus a route.

  • Add an entry to TOOLS in lib/tools.ts filling every field of the Tool interface (lib/tools.ts:19-50). Use applicationCategory: "DeveloperApplication", reuse the CTA_PROJECTS / CTA_CONTACT constants for the CTA links, and set sitemapPriority: 0.9 like the other tools.
  • Pick accentVar from the accent variables in app/globals.css (the list is under "Adding a tool" in CONTRIBUTING.md). Take one that no tool uses yet, or the one the fewest tools have if they're all taken. Don't use --rose, it's the color of error messages. Set accentHex to that variable's dark-theme value. heroDim must be "" or a substring of heroHeading.
  • Write 3 or 4 FAQs (3 renders as a 3-column grid, see components/shared/ToolPageLayout.tsx:25). Keep metaTitle under 60 characters and metaDescription around 150 to 160.
  • Keep features and ogDescription to plain Latin text and punctuation. The social card font is a subset with no arrow or symbol glyphs (lib/og.tsx:33-36).
  • Create app/(tools)/<slug>/page.tsx, <Name>Client.tsx (with "use client"), and opengraph-image.tsx. Copy page.tsx and opengraph-image.tsx from app/(tools)/base64/ and change the slug.
  • Put all pure logic in lib/<name>.ts (no React, no DOM) with tests in lib/__tests__/<name>.test.ts. Tests can import with @/ like the app does (vitest.config.ts has the alias).
  • Nothing leaves the browser: no network calls with user input, no analytics, no third-party scripts (the CSP in middleware.ts blocks external scripts anyway).
  • Reuse shared pieces: CopyButton, useToast, and optionally useRegisterCommands for command palette actions (example in app/(tools)/base64/Base64Client.tsx:43-53).
  • Every input has a visible label or an aria-label, the tool works with the keyboard alone, and it looks right in both light and dark themes.
  • Add the tool to the "Which tool?" dropdown in .github/ISSUE_TEMPLATE/bug_report.yml.
  • npm run lint && npm run test && npm run build passes.

One new tool per contributor, so more people get a chance. Add your registry entry at the end of TOOLS and rebase on develop before asking for review, since other new tools will touch the same file.

Want to work on this? Comment below and I'll assign it to you. Please take one issue at a time, branch off develop, and open your PR against develop with Closes #83 in the description.

Ngôn ngữ chính
TypeScript
Star
1
Fork
9
Merge trung bình
10 giờ 24 phút
Pull request đã merge (30 ngày)
93

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của codercops/toolbelt

Tất cả issue của codercops/toolbelt

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.