UtilPlex - Developer Utilities

UtilPlex is a modern Angular 20.1.x web application providing essential developer utilities for code formatting, data conversion, encoding, diff comparison, and time zone management. Built with standalone components, signals, and server-side rendering (SSR), UtilPlex offers a comprehensive suite of tools to streamline your development workflow.

🌐 Live Version

https://www.utilplex.com

Table of Contents

• UtilPlex - Developer Utilities
  • 🌐 Live Version
  • Table of Contents
  • Features
    • Code Formatters
    • Data Converters
    • Encoders/Decoders
    • Content Generators
    • Diff Tools
    • Time Zone Tools
  • Getting Started
    • Prerequisites
    • Installation
  • Development
    • Available Commands
    • Project Structure
  • Architecture
    • Key Design Patterns
  • License

Features

Code Formatters

• SQL Formatter - Beautify SQL queries with proper indentation and formatting
• JSON Formatter - Format and minify JSON data with advanced prettification
• CSS Formatter - Clean and organize CSS code with professional formatting
• JavaScript Formatter - Beautify JavaScript code with modern syntax support
• TypeScript Formatter - Format and beautify TypeScript code with proper indentation and type definitions
• SCSS Formatter - Format and beautify SCSS/Sass code with proper indentation and structure

Data Converters

• JSON to YAML Converter - Convert JSON data to YAML format while preserving structure

Encoders/Decoders

• Base64 Encoder/Decoder - Encode and decode data in Base64 format with ASCII/UTF-8 support

Content Generators

• GUID Generator - Generate UUIDs with multiple format options (standard, compact, uppercase)
• Lorem Ipsum Generator - Create placeholder text with customizable word, sentence, or paragraph output

Diff Tools

• File Diff Checker - Compare two files or text blocks and highlight the differences between them with side-by-side comparison

Time Zone Tools

• Time Zone Converter - Convert times between global time zones with daylight saving awareness

All tools feature:

• CodeMirror editor integration with syntax highlighting
• Custom Dracula theme for optimal readability
• Copy/paste functionality
• Side-by-side diff comparison for text analysis
• Responsive design for mobile compatibility
• Comprehensive error handling

Getting Started

Prerequisites

• Node.js (v20 or higher)
• Angular CLI (v20 or higher)
• npm or yarn package manager

Installation

1. Clone the UtilPlex repository:

   git clone https://github.com/timothydodd/utilplex.git
   cd utilplex

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

4. Open your browser and navigate to http://localhost:4200

Development

Available Commands

• npm start - Start development server
• npm run build - Production build
• npm run build:ci - CI production build
• npm test - Run unit tests
• npm run lint - Run ESLint
• npm run serve:ssr:utilplex - Serve SSR build

Deployment

UtilPlex is configured for automated deployment to Azure Storage static website hosting via GitHub Actions.

Azure Storage Setup

1. Create Azure Storage Account:

   az storage account create \
     --name <your-storage-account-name> \
     --resource-group <your-resource-group> \
     --location <your-region> \
     --sku Standard_LRS \
     --kind StorageV2

2. Enable Static Website Hosting:

   az storage blob service-properties update \
     --account-name <your-storage-account-name> \
     --static-website \
     --index-document index.html \
     --404-document index.html

3. Get Storage Account Key:

   az storage account keys list \
     --account-name <your-storage-account-name> \
     --query "[0].value" \
     --output tsv

GitHub Secrets Configuration

Add the following secrets to your GitHub repository (Settings → Secrets and variables → Actions):

• AZURE_STORAGE_ACCOUNT_NAME - Your Azure Storage account name
• AZURE_STORAGE_ACCOUNT_KEY - Your Azure Storage account access key

Deployment Workflow

The GitHub Actions workflow automatically:

1. Builds the Angular application on push to main branch
2. Deploys pre-rendered static files to Azure Storage $web container
3. Configures optimal cache headers:
   • index.html: 5 minutes (frequent updates)
   • Hashed JS/CSS: 1 year (immutable content)
   • Other assets: 1 day (moderate caching)

Manual Deployment

To deploy manually:

# Build the application
npm run build:ci

# Upload to Azure Storage
az storage blob upload-batch \
  --account-name <your-storage-account-name> \
  --account-key <your-storage-account-key> \
  --destination '$web' \
  --source dist/utilplex/browser/

Your site will be available at: https://<your-storage-account-name>.z13.web.core.windows.net/

Note: The exact URL format depends on your Azure region. Check your storage account properties for the correct endpoint.

Project Structure

src/app/
├── _services/          # Global services and routing
├── formatters/         # Code formatting utilities
├── converters/         # Data conversion tools
├── encoders/           # Encoding/decoding tools
├── generators/         # Content generation utilities
├── diff/              # File and text comparison tools
├── time/              # Time zone tools
├── codemirror/        # CodeMirror editor configuration and themes
└── components/        # Shared UI components

Architecture

UtilPlex uses a modern Angular architecture with:

• Service Provider Pattern - Abstract base classes with concrete implementations
• Signal-Based State Management - Modern reactive state management
• Standalone Components - No NgModule dependencies
• Dynamic Routing - Centralized route management with lazy loading
• SSR Support - Server-side rendering for optimal performance

Key Design Patterns

• Formatters: FormatViewService (abstract) → SqlFormatProvider, JsonFormatProvider, CssFormatProvider, JavascriptFormatProvider, TypescriptFormatProvider, ScssFormatProvider
• Converters: ConverterServiceBase (abstract) → JsonToYamlConverter
• Generators: GeneratorServiceBase (abstract) → GuidGeneratorService, LoremIpsumGeneratorService
• Diff Tools: DiffService for file and text comparison functionality
• Generic Views: Reusable components that work with any service implementation

License

This project is licensed under the MIT License.