JO
Zurück zu Projekten

Frontend Toolkit

Datenschutzfreundliche Sammlung von über 21 Entwickler-Tools inkl. JSON-Formatter, UUID-Generator, Base64-Encoder – alles clientseitig.

Jahr

2025

Rolle

Full-Stack Entwicklung & Design

Technologien

ReactNext.jsTypeScriptTailwind

Screenshots

Hauptmerkmale

1

JSON Formatter - JSON validieren, verschönern und formatieren mit Syntax-Hervorhebung

2

UUID Generator - Eindeutige Kennungen mit Unterstützung für v1, v4 und v7 erstellen

3

Base64 Encoder/Decoder - Base64-Strings mit MIME-Unterstützung kodieren und dekodieren

4

Timestamp Converter - Zwischen Unix-Timestamps und lesbaren Daten konvertieren

5

QR Code Generator - Anpassbare QR-Codes für Text oder URLs erstellen

6

Text Diff Checker - Texte mit zeilenweiser Differenzvisualisierung vergleichen

7

Hash Generator - MD5-, SHA-1-, SHA-256- und SHA-512-Hashes generieren

8

URL Encoder/Decoder - URL-Parameter sicher kodieren und dekodieren

9

Color Converter - Zwischen HEX-, RGB-, HSL-Farbformaten konvertieren

10

Lorem Ipsum Generator - Platzhaltertext für Designs generieren

11

Markdown Preview - Live-Vorschau von Markdown mit Syntax-Hervorhebung

12

CSS Minifier - CSS-Code komprimieren, um Dateigröße zu reduzieren

13

JavaScript Minifier - JavaScript-Code für Produktion minimieren

14

Password Generator - Sichere Passwörter mit benutzerdefinierten Optionen erstellen

15

Image Compressor - Bildgrößen reduzieren bei gleichbleibender Qualität

16

CSS Unit Converter - Zwischen px, rem, em und anderen CSS-Einheiten konvertieren

17

Regex Tester - Reguläre Ausdrücke mit Live-Matching testen und debuggen

18

JWT Decoder - JSON Web Tokens dekodieren und inspizieren

19

HTML Entity Encoder - Sonderzeichen in HTML-Entitäten umwandeln

20

Case Converter - Text zwischen verschiedenen Schreibweisen transformieren

Technische Umsetzung

  • Next.js 15 App Router für optimale Performance

  • React 19 mit TypeScript für typsichere Entwicklung

  • Tailwind CSS 4 mit benutzerdefinierten CSS-Variablen

  • SEO-optimiert mit strukturierten Daten und Metadaten

  • Dark Mode mit localStorage-Persistenz

  • Vollständig responsiv und mobilfreundlich

  • Kein Backend - alle Tools laufen im Browser

  • WCAG AA-konform für Barrierefreiheit

Interessiert an diesem Projekt?

Sieh dir die Live-Demo an oder erkunde den Quellcode