JO
Back to Projects

Frontend Toolkit

Privacy-first collection of 21+ developer utilities including JSON formatter, UUID generator, Base64 encoder – all client-side.

Year

2025

Role

Full-Stack Development & Design

Technologies

ReactNext.jsTypeScriptTailwind

Screenshots

Key Features

1

JSON Formatter - Validate, beautify, and format JSON with syntax highlighting

2

UUID Generator - Create unique identifiers with support for v1, v4, and v7

3

Base64 Encoder/Decoder - Encode and decode Base64 strings with MIME support

4

Timestamp Converter - Convert between Unix timestamps and human-readable dates

5

QR Code Generator - Create customizable QR codes for any text or URL

6

Text Diff Checker - Compare text with line-by-line difference visualization

7

Hash Generator - Generate MD5, SHA-1, SHA-256, and SHA-512 hashes

8

URL Encoder/Decoder - Encode and decode URL parameters safely

9

Color Converter - Convert between HEX, RGB, HSL color formats

10

Lorem Ipsum Generator - Generate placeholder text for designs

11

Markdown Preview - Live preview Markdown with syntax highlighting

12

CSS Minifier - Compress CSS code to reduce file size

13

JavaScript Minifier - Minify JavaScript code for production

14

Password Generator - Create secure passwords with custom options

15

Image Compressor - Reduce image file sizes while maintaining quality

16

CSS Unit Converter - Convert between px, rem, em, and other CSS units

17

Regex Tester - Test and debug regular expressions with live matching

18

JWT Decoder - Decode and inspect JSON Web Tokens

19

HTML Entity Encoder - Convert special characters to HTML entities

20

Case Converter - Transform text between different case styles

Technical Implementation

  • Next.js 15 App Router for optimal performance

  • React 19 with TypeScript for type-safe development

  • Tailwind CSS 4 with custom CSS variables

  • SEO optimized with structured data and metadata

  • Dark mode with localStorage persistence

  • Fully responsive and mobile-friendly

  • Zero backend - all tools run in browser

  • WCAG AA compliant for accessibility

Interested in this project?

Check out the live demo or explore the source code