🟢 Good First Issue: Add Client-Side Hex Viewer & Binary File Inspector to Dev Utilities

[shamilahmdt]

🟢 Good First Issue: Add Client-Side Hex Viewer & Binary File Inspector to Dev Utilities

Time: ~60-75 minutes

Difficulty: Intermediate

Skill Level: First-time contributors welcome

Help expand the Dev Utilities Sandbox by creating an offline-ready Hex Viewer & Binary File Inspector utility.

⭐ Before You Start

If you enjoy the project, please consider starring the repository. Every star helps support future development and encourages more open-source contributions.

---

📌 Description

Create a client-side utility that allows developers to upload or drag-and-drop any local file (up to 10MB) to view its raw binary data in a classic hex dump format: offset index, hexadecimal byte pairs, and raw text representation. The tool should operate entirely client-side (offline) to ensure user data remains secure, and it should detect common file signatures (magic bytes) to display the file type metadata.

---

🎯 Requirements

1. Structure & Layout

• Register the route in src/App.jsx at /devutilities/hex-inspector.
• Add the new item to the Dev Utilities section in src/config/sidebarSections.js:

  {
    label: "Hex Viewer & Binary Inspector",
    description: "Inspect file binary headers, offsets, hex patterns, and ASCII streams client-side offline.",
    path: "/devutilities/hex-inspector",
  }

• Register the corresponding utility card to the cards array in src/pages/DevUtilities/DevUtilities.jsx to ensure it is searchable and displays on the Dev Utilities overview page.
• Create a two-column or split layout:
  1. Control Panel / Metadata (Left/Top): Drag-and-drop file target, selector for row size (8, 16, or 32 bytes per line), starting offset navigation (pagination), recognized file signatures (magic bytes, e.g. 89 50 4E 47 for PNG), mime type, size, and client-side hash calculations (MD5, SHA-256).
  2. Hex Viewer Display (Right/Bottom): A monospace, side-by-side rendering panel:
     • Offset Column: Addresses in hex (e.g., 000000a0).
     • Hex Column: Hexadecimal representations of bytes grouped in pairs (e.g. 89 50 4E 47 0D 0A 1A 0A). Highlight selected bytes.
     • Text Column: Decoded text characters using chosen encoding (ASCII or UTF-8). Replace non-printable bytes with a dot (.).
• Use the existing monochrome styling (supporting light/dark themes).

---

2. Feature Details

📁 File Handling & Performance

• Read files using the browser FileReader API as an ArrayBuffer.
• Slice large files so that only visible page segments (e.g., 1KB to 10KB pages) are rendered at once, ensuring high-speed scrolling and rendering without lagging the UI thread.
• Include a set of test file presets (e.g., a mini dummy text file, empty file) for fast validation without uploading.

🔍 Magic Bytes & Header Recognition

• Read the first 4-8 bytes of files to identify signatures for:
  • Images: PNG, JPEG, GIF, WebP.
  • Documents: PDF, ZIP, RAR.
  • Binaries: EXE, ELF, WASM.
• Output the identified format prominently in the metadata view.

---

✅ Expected Result

Users should be able to:

• Drop any file (e.g. a small image or binary) into the tool.
• Visually inspect the file structure, headers, and text streams in real-time.
• View calculated file hashes instantly without sending data to any server.
• Page through files efficiently using pagination or virtual scrolling.

---

✅ Submission Requirements

1. ⭐ Star the repository.
2. 🍴 Fork the repository.
3. 🌿 Create a feature branch.
4. Build and test the Hex Viewer & Binary Inspector.
5. Commit your changes and open a Pull Request linking this issue.

---

🚀 Quick Info

Category	Details
Difficulty	Intermediate
Time	~75 mins
Focus	ArrayBuffer slicing, FileReader API, Hex mapping, Layout
Tech	React, JavaScript
Good For	First-time Contributors

[mashuibr]

I want to work on this issue. Could you please assign me this issue?

[github-actions]

Hi @mashuibr,

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!