English
Danil Lisin
Vue/NuxtDeveloper
Transforming complex tasks into elegant solutions. Specializing in Vue/Nuxt, TypeScript and creating scalable applications with well-thought-out architecture.
Architecture as a reactive system
Interface as its human face
I design cohesive systems with Vue and Nuxt: SPA for complex applications, SSR for live data, SSG for fast static pages. Vue's modularity and TypeScript's clarity serve one goal — intuitive digital products that load fast and are easy to find in search.
Application structure designDeveloping modular and scalable architecture, organizing codebase for easy maintenance and growth
Interface layoutCreating responsive, cross-browser and accessible interfaces using modern approaches (Flexbox, Grid)
State management implementationSetting up centralized store (Pinia/Vuex), organizing data and their reactive connections between components
Client-server communicationBuilding service layer for API work, error handling, implementing retry mechanisms and caching
RoutingDeveloping complex navigation systems with nested and protected routes, lazy loading of components
This approach enables me to create reliable and scalable solutions that are convenient to develop and maintain.
Technology Stack
Core Stack
Vue.js
Composition API, composables, reactivity and lifecycle hooks: from SPAs to SSR/SSG together with Nuxt
Nuxt
SSR and SSG apps built on file-based routing, server- and client-side data fetching, SEO optimization, and API integration
Pinia
Application state management with the Composition API, modular stores via Setup Store syntax, TypeScript integration
TypeScript
Strict typing, generics, utility types, type safety in components and stores
Vue Router
Navigation with lazy loading, nested routes, navigation guards, history management, route protection
Interfaces built with Vue.js, the Composition API and TypeScript; Nuxt when SSR or SSG is needed: fast first load and proper indexing by search engines.State lives in Pinia, navigation and lazy loading in Vue Router. Logic is assembled from small composable functions, so the code is easy to reuse and test.
Development Tools
Vite
Fast project builds, plugin configuration, production build optimization
i18n
App localization, dynamic translation loading, pluralization
Git
Team collaboration, feature branches, code review, conflict resolution
REST API
Building and using custom HTTP request wrappers, error handling, caching, request lifecycle management
Code Quality
ESLint and Prettier for consistent style and automated checks, unit tests with Vitest, e2e scenarios with Playwright for critical paths
Vite starts a project instantly on native ES modules, and Git is a time machine for your code.REST API is the universal language for talking to the backend, Vue i18n makes the interface understandable in any language, and linters and tests make sure nothing breaks.
Markup & Styling
HTML5
Semantic markup, accessible forms, native APIs (dialog, details, picture), ARIA attributes, keyboard navigation, and focus management
CSS3
Custom properties, Grid and Flexbox, transitions and keyframes, container queries, modern functions (clamp, min/max)
SCSS/SASS
Preprocessing, variables, mixins, functions, design tokens, style modularity, and nesting without cascade hell
BEM
Class naming methodology, reusable blocks and elements, CSS Modules for local scope and style isolation
Responsiveness
Mobile First, media queries, fluid typography, responsive images: WebP/AVIF, lazy loading, srcset and sizes
HTML5 is responsible for meaning and structure, CSS3 for the visual layer, animations, and responsiveness. Grid and Flexbox build layouts of any complexity, while semantics and ARIA tell browsers and assistive technologies what actually matters on the page.SCSS/SASS is CSS multiplied by logic: variables, mixins, and tokens turn style maintenance into a programmable process. BEM and CSS Modules keep styles predictable and isolated.
DevOps
Docker
Containerizing apps and services, Docker Compose for local environments and production
Nginx
Reverse proxy, static file serving, gzip/brotli, caching, SSL termination
CI/CD
GitHub Actions / GitLab CI pipelines: build, tests, deploy, release automation
Monitoring
Error and log tracking, metrics, alerts, Uptime Kuma, Grafana, Sentry
Backups
Backing up databases, configs, and build artifacts, recovery after failures
Docker packages the app with all its dependencies into an isolated container, while Nginx serves static assets and acts as a reverse proxy.CI/CD automates build, tests, and deployment. Monitoring and backups cover operations: you can see what's happening and you have a way to recover.
Artificial Intelligence as a working tool
AI is built into the daily development workflow: it speeds up routine tasks and helps keep code quality high, while the processes around it stay clear and controlled.
ClaudeGenerating complex TypeScript types, architecture design, documentation writing, and legacy refactoring.
CursorContextual autocomplete, writing tests, explaining unfamiliar code, and on-the-fly refactoring.
CopilotQuick boilerplate autocomplete, repetitive markup blocks and routine data queries.
Career
2017 - 2025
December 2020 — October 2025
Lead HTML-Developer / Frontend Developer
Design and development of Vue 3 components for TWx and TravelShop products. Creating UI architecture, developing interactive elements and complex SPA applications for flight booking systems. Support and customization of TravelShop templates on Bitrix for various airlines.
Tais
October 2017 — December 2020
Lead HTML-Developer / Frontend Developer
Development of front-end interfaces for online booking and flight registration systems. Creating intuitive user interfaces, working with forms and data validation, integration with backend systems and APIs.
1998 - 2017
Web Designer
Creating animated and interactive advertising banners for television projects. Full development cycle: from concept and design to implementation using HTML5, CSS3 and JavaScript. Creating responsive banners supporting various sizes and devices.
Web Designer
Design and development of websites for major advertising agency clients. Creating interactive interfaces, working on improving user experience. Participation in creating comprehensive digital solutions for brands. Working according to corporate standards and client guidelines.
Web Designer / Web Developer
Development and support of websites for company's media projects. Creating user interfaces, designing promotional pages and landing pages. Integration of design with content management systems, optimization of web page performance.
Web Designer
Development of corporate website designs, creating advertising banners and iconography. Full interface design cycle: from prototyping and visual design to adaptive layout. Graphics optimization and ensuring cross-browser compatibility.
Web Designer / Web Developer
Full cycle of web project creation: from user interface design and visual design to frontend development. Creating intuitive interfaces for content exchange platforms, developing admin panels and user cabinets. Optimizing user experience and interaction.
NIKITA ONLINE
Web Designer
Development of corporate website designs and promotional pages for company's gaming projects. Creating visual concepts, designing page layouts and interface elements. Preparing graphic materials for web publications.
Nettrader
Web Designer
Design of user interfaces for financial and trading platforms. Creating intuitive and functional interfaces for working with financial data. Development of visual communication systems and branding elements.
Web Designer
Creating website designs for agency clients. Development of visual concepts, preparation of layouts and graphic elements. Working on improving user experience and navigation on web resources.
Yutinet.Ru
Web Designer
Design and development of web interfaces for internet portals. Creating user interfaces, working on improving navigation and content structure. Development of graphic elements and visual identity systems.
ION Digital Center
Web Designer
Design and development of websites for various business segments. Full interface creation cycle: from target audience research and prototyping to final implementation. Development of adaptive designs and ensuring cross-browser compatibility.
ADT Web Solutions
Web Designer
Creation of corporate website and online store designs. Development of user interfaces, navigation design and content structure. Working on branding and creating unified visual systems for web projects.
Freelance
Web Designer
Execution of website design and development orders for various clients. Creating unique design concepts, developing page layouts, preparing graphic elements. Working on full web project creation cycle from idea to implementation.
Artez Production
Web Designer
Website design for production company clients. Creating visual concepts, developing interfaces and navigation systems. Preparing graphics for web publications and ensuring design compliance with technical requirements.
AVM New Wave Inc.
Web Designer
Design of early websites at the beginning of internet development in Russia. Establishing foundational principles of web design and navigation. Working with limited technical capabilities of that time, optimizing graphics for slow internet connections.
Lead Frontend Developer
TravelShop 2.0 - Airline Booking System
Development and support of a modern airline booking system for Russian and international airlines, including Azimuth.
Key System Features
For Airlines and AgenciesA solution for Russian and international carriers and online travel agencies: from White Label to customized systems under the client's brand.
B2C and B2B in One ProductPrivate passengers and corporate clients: cashless payment from a deposit, individual agency fee, and special settings.
Payments for Any ScenarioCards, e-wallets, corporate deposit, and integrations with popular payment solutions.
Metasearch Engine IntegrationQuick sales launch via Aviasales, Yandex.Flights, SkyScanner, Momondo, Kayak, and other services.
Direct Access to ContentWorking with GDS, DCS, and metasearch services via flexible API — real-time data and fares without intermediaries.
Single PWA CodebaseOne Vue/Nuxt solution for desktops, tablets, and mobile devices — without separate versions for each platform.
iOS and Android Mobile AppsFully functional apps for searching, booking, and managing tickets on smartphones.
Deep CustomizationAdaptation of the interface and logic to the client's business specifics — 2–3 times faster and cheaper thanks to a single codebase.
Full-featured APIFlexible API for integration with external systems and building custom scenarios on top of the product.
Security and ComplianceArchitecture designed with regulatory requirements for protecting infrastructure and travelers' personal data in mind.
ScalabilityModular architecture that withstands transaction volume growth and onboarding of new clients without core rework.
Boutique ApproachIndividual solutions for large projects and ongoing support — instead of a typical 'out-of-the-box' implementation.
Flight Booking
From search to payment — without calling the call center
The user finds a flight, selects a fare, and goes through a multi-step booking wizard with validation at each step. The system works with real-time airline data and fares directly via GDS, applies flexible pricing rules — including individual conditions for corporate clients — and connects to metasearch engines (Aviasales, Yandex.Flights, SkyScanner, Momondo, Kayak). Payment — cards, e-wallets, corporate deposit.
What's inside
- Booking wizard: intuitive input fields, smart city search (autocomplete), and a convenient date picker.
- Passenger data validation at each step — booking errors reduced by 60%.
- Support for complex scenarios: from instant card payment to funds deduction from a corporate deposit.
- Search query caching — system performance improved by 25%.
- Flexible architecture allows adding new features 40% faster.
Online Check-in
Self-service check-in with seat selection and add-ons
The passenger checks in for a flight online from their personal account, selects a seat on board, and immediately purchases baggage, meals, or insurance. The system integrates with various DCS, and the seat map comes from different booking systems in different formats.
What check-in consists of
- Universal aircraft seat map that displays flawlessly regardless of which booking system provided the data.
- Visual seat selection: the passenger immediately sees occupied and available seats, as well as seats with extra amenities.
- Convenient check-in process combined with the sale of add-on services (baggage, meals, insurance).
- Instant transmission of check-in data directly to the airline.
Add-on Services
Post-booking add-ons — without changing the ticket
The passenger purchases baggage, meals, or insurance after the ticket is issued. The sales logic is designed to offer services at the right moment and in a clear way — this increases the average check and reduces the call center load.
How add-on purchase works
- Clear interface for selecting and purchasing add-ons, integrated into the overall purchase flow.
- Smart offer logic: the system shows only those services that are available for a specific fare.
- Flexible interface customization for different clients (White Label) without code duplication.
- Instant retrieval of up-to-date prices and available options from service providers.
Ticket Exchange/Refund
Managing bookings according to fare rules — online
The passenger independently exchanges or refunds a ticket from their personal account. The system automates procedures in accordance with fare rules and guides the user through a transactional scenario without errors.
What the scenario provides
- Step-by-step exchange and refund interface: the system itself prompts which actions are available under the fare.
- Transparent calculation of refund or surcharge amounts in real time.
- Transaction reliability: operation status visualization and protection against failures during fund refunds.
- The history of all booking changes is always available to the passenger.
Personal Account
A single point for managing orders and profile
The passenger views order history, manages their profile, re-books, and independently makes changes to bookings. Corporate users additionally get cashless payment from a deposit and an individual agency fee.
What's inside the account
- Convenient order list with quick access to the details of any flight.
- Passenger profile management and data saving for faster booking in the future.
- Interface separation for individuals (B2C) and corporate clients (B2B).
- Quick re-booking of tickets in just a few clicks.
Architecture and Technologies
The foundation ensuring speed, reliability, and scalability
Cross-cutting technical solutions that power all system modules. From a unified component library to fault-tolerant API interactions and complex data transformation logic.
Technical solutions
- Unified UI library: reusable Vue components with accessibility (a11y) and theming support.
- State management: well-designed Pinia store architecture for reliable data storage.
- Reliable data exchange: REST API request pipeline with automatic parameter passing, retries on failure, and cancellation.
- Universal seat map: a driver system to convert formats from any booking system into a unified view.
- Flexible localization: mechanism for merging default and custom dictionaries for different build bundles (White Label).
- Monitoring and analytics: built-in API error tracking panel (RPS, p95) and Telegram alerting.
Architectural Solutions inVue • Nuxt • Node.js
From UI components to deployment and monitoring systems — here you'll find concrete technical solutions that I have designed and implemented in practice.
UI Components Development
Designed and implemented a UI component library for a large web application with focus on accessibility, performance and developer experience.
Key Components
Input fields and selectors
Components implement full interaction cycle including validation, input masks, custom placeholders, as well as visual states for errors and loading.
Smart autocomplete
Component features complex keyboard handling logic, virtual scrolling, optimized for mobile devices and supports convenient T9 input.
Modal windows and tooltips
Universal overlay components with swipe gesture support, automatic background scroll blocking, and proper focus management for accessibility.
Calendar and date picker
Flexible component for selecting single dates and periods with ability to define custom range highlighting logic and configurable visual states.
Tables and tabs
Library includes high-performance tables with row virtualization and adaptive tab components equipped with programmatic API for navigation control.
Development Process
1
API Design
Developing component interfaces considering usability and type safety
2
Core Functionality Implementation
Creating main component functionality with accessibility support
3
Testing and Documentation
Writing tests and creating documentation with usage examples
4
Integration and Feedback
Project integration and feedback collection for component improvement
Component Library Architecture
Base Componentsfundamental UI elements with well-designed API and theming support
Composite Componentscomplex compound components built on base elements
Theming Systemappearance customization mechanism through CSS Custom Properties
Documentationcomprehensive documentation with usage examples and API reference
Component-Based Approach Benefits
30% faster feature development through component reuse
Ensuring interface consistency throughout the application
Simplifying codebase maintenance and scaling
Improving user experience on mobile devices
40% reduction in UI logic bugs
REST API Pipeline System
A powerful system for organizing sequential HTTP requests to REST API, where each subsequent call can utilize data from the previous one. Provides complete control over request chain execution with progress visualization and intelligent error handling.
Key Pipeline Capabilities
Sequential HTTP chains
System organizes and executes REST API requests strictly one after another, ensuring correct execution order and control over data flow.
Auto data transfer between steps
Results of each executed request (e.g., created object ID) are automatically and safely substituted into parameters of subsequent requests, eliminating manual data stitching.
Real-time progress tracking
Interface displays visual progress bar and status of each stage, providing user with full transparency about current execution state.
Smart error handling and retries
System analyzes server response codes (e.g., 5xx errors) and automatically performs request retries according to configurable rules, increasing fault tolerance.
Conditional execution logic
Allows defining rules (e.g., if/else) that determine whether the next request will be executed, based on data obtained in previous steps.
Auto-cancel dependent requests
When a fatal error occurs, the system automatically aborts execution of the entire subsequent chain, preventing pointless calls.
End-to-end type safety
Thanks to TypeScript integration, system ensures strict type checking for input parameters and data passed between pipeline steps.
Pipeline Work Process
1
Request Chain Configuration
Defining the sequence of API calls, dependencies between them, and execution conditions for each stage
2
Initialization and Validation
Configuration correctness check, data preparation, and execution progress tracking initialization
3
Sequential Execution
Step-by-step execution of HTTP requests with automatic data transfer and intermediate result processing
4
Monitoring and Management
Continuous progress tracking, handling emerging errors, and adaptive management of chain execution
5
Final Processing and Cleanup
Aggregation of all request results, data finalization, and system resource release
Pipeline Architecture
Pipeline Orchestratorcentral coordinator managing the sequence of API request execution and data transfer between them
Request ExecutorHTTP request executor with support for retry logic, timeouts, and handling of various status codes
Progress Trackermodule for tracking request chain execution progress with detailed breakdown by each stage
Error Handlercentralized error handler with classification by types and recovery strategies
Type Safety Layerstrict typing layer ensuring data correctness at all pipeline stages
Pipeline Approach Benefits
40% reduction in development time for complex API interactions
Increased reliability through centralized error handling and retry mechanisms
Improved user experience through accurate progress display
Simplified debugging and monitoring of request chains
Flexibility for implementing complex business processes with dependent API calls
Full type safety reduces runtime errors
Easy integration with existing Vue.js application ecosystem
REST API Monitoring Module
A built-in module for real-time REST API health monitoring: accumulates HTTP request history, builds per-endpoint analytics, tracks errors with trend comparison, and sends Telegram alerts when configurable threshold rules are triggered.
Key Monitoring Capabilities
HTTP Request History
Middleware intercepts every request, recording method, URL, status code, duration and timestamp. Data is stored in a 5,000-entry ring buffer and persisted to an NDJSON file with automatic rotation at 10 MB.
Sliding Window Analytics
Analytics endpoints return metrics for a configurable time window: RPS, average response time, p95 percentile, error rate, and status code distribution (2xx/3xx/4xx/5xx).
Per-Endpoint Breakdown
The system normalizes URLs (replacing dynamic segments with wildcards) and groups requests by route, showing a top-20 endpoint list with call count, error rate, and p95 for each.
Error Tracking with Delta
The error module compares current and previous observation windows, calculates percentage change, and builds a timeline histogram of errors, helping to spot spikes quickly.
Active Endpoint Probing
Configurable probe endpoints are polled on a schedule. Each check result (status code, duration, error) is stored in history for availability graph rendering.
Rule-Based Telegram Alerts
A flexible rule system: condition (error rate, p95 latency, endpoint unavailability) → bot → message. When triggered, the rule is recorded in the alert log with a timestamp.
How Monitoring Works
1
Request Interception
Every incoming HTTP request passes through middleware that captures metadata and records it after the response is received
2
Accumulation and Persistence
Entries are added to the ring buffer and simultaneously written to an NDJSON file; history is restored from the file on service restart
3
Analytics Calculation
On request from the control panel the engine filters events for the desired window and computes aggregated metrics
4
Active Probing
The scheduler polls configured endpoints on schedule and stores results for availability graph rendering
5
Rule Evaluation and Alerts
After each check the rules engine compares metrics against threshold values and sends a Telegram notification when a rule is violated
Monitoring Module Architecture
Request Logger Middlewarerequest interceptor collecting metadata from every HTTP call and passing it to the ring buffer
Request History Storestorage with in-memory buffer and NDJSON persistence, restoring history after service restart
Analytics Enginemetrics calculation module (RPS, p95, errorRate, statusDist, endpoint top) over a sliding time window
Probe Scheduleractive endpoint probe scheduler storing check result history in the database
Alert Rules Enginerules engine that evaluates current metrics and fires Telegram notifications when thresholds are breached
IP Blocklistblocked IP address filter with API-driven management for blocking unwanted traffic sources
Built-in Monitoring Benefits
Observability with no external dependencies — the module is built directly into the API
Request history survives service restarts by restoring from a local file
Instant anomaly detection through comparison of current and previous periods
Precise bottleneck diagnosis with p95 breakdown at the route level
Telegram alerts with configurable conditions — no need to run Grafana or Prometheus
Zero incident response delay thanks to active probe checks
Vue/Nuxt Application Auto-Deploy and Hosting Platform
A lifecycle management system for Vue and Nuxt applications: clones the repository, builds the image in an isolated container with memory limits, publishes the result behind Traefik with automatic TLS, and binds any custom domain — all through a control panel, without editing configs or SSH.
Key Platform Capabilities
Automatic Build from Repository
On deploy command the system clones the target branch (including private repositories) and runs the build in an ephemeral Docker container with the specified Node version, dependency install, and build commands.
Vue SPA, Nuxt Static and Nuxt SSR Support
For each application type the deployer generates an appropriate Dockerfile: static apps are packed into an nginx image, SSR into a Node image with a live process on port 3000.
Dynamic Domain Routing
Adding an application in the panel automatically attaches Traefik labels to the container. A new domain becomes active without restarting the gateway or editing configuration files.
Automatic TLS (Let's Encrypt)
Traefik requests and renews Let's Encrypt certificates via HTTP-01 on first access to the domain. Certificate status is shown in the application card in the control panel.
Private Repositories with Encrypted Tokens
SSH deploy keys or personal tokens are stored encrypted in the database (AES-256-GCM), decrypted only during cloning, and never appear in logs.
Production Protection from OOM During Build
Every build container is launched with an explicit memory limit and NODE_OPTIONS; builds run strictly one at a time in a queue — peak Vite/Nuxt consumption cannot crash running production services.
Application Deploy Process
1
Application Configuration
Parameters are set in the control panel: repository, branch, type (Vue/Nuxt SSR/Static), domain, build commands, and environment variables
2
Clone and Build
The deployer clones the target branch (using the encrypted access key) and builds the image in an isolated container with a memory limit
3
Package and Start Container
The ready artefact is packed into an nginx or Node image and started as a container with Traefik labels containing the domain and TLS settings
4
Automatic Certificate Issuance
Traefik detects the new container, initiates the HTTP-01 ACME challenge, and issues a Let's Encrypt certificate for the specified domain
5
Status Update and Cleanup
The database is updated (container_id, image_tag, status=running), the old container and image are removed, and build logs are available in the panel
Platform Architecture
Deployer Servicedeploy orchestrator inside the API: clones the repository, generates a Dockerfile for the application type, runs the build, and starts the container
Build Queuebuild queue with concurrent run locking that protects server resources from overload
Git Credentials Storeencrypted storage of SSH keys and tokens for accessing private repositories
Traefik Gatewaygateway with a dynamic Docker provider: reads container labels and updates routes and TLS without restart
Control PanelVue SPA control panel: application list, build parameters form, real-time logs, TLS status
GitHub Actions CIpipeline for building platform service images (API, panel) and automatic SSH deployment to the server after push to master
Platform Benefits
Deploying a new application takes minutes — no SSH, no config editing, through the UI
A single Traefik gateway handles all domains and certificates without manual intervention
Private repository support with database-level token encryption
Automatic CI/CD: push to master → image in GHCR → service update on the server
Built-in OOM protection during build keeps production stable
One server simultaneously hosts the platform and any number of applications with network isolation
Flexible Localization System with String Overrides
The implemented system allows overriding specific strings in locales depending on the project build bundle, providing flexibility in interface customization for different clients.
Key Localization Features
Override specific strings
System allows selectively replacing individual translations without requiring full copying and duplication of entire dictionary for making changes.
Support for multiple languages
For each supported language, you can define its own set of custom strings, providing unique interface localization for different regions.
Automatic locale merging
Default translations and custom overrides are automatically merged into a single dictionary during project build.
Bundle-specific configuration
Mechanism takes into account target build bundle (e.g., client A or client B), loading corresponding set of customized translations.
Preserve default values
For all strings that were not explicitly overridden, system guarantees use of standard values from base dictionary.
Quick translation addition
New custom strings can be quickly added as separate files or entries, after which they are automatically picked up by the system.
How Locale Merging Works
1
Bundle Identification
The system identifies the current build bundle and checks for custom dictionaries for it
2
Locale Loading
Base translation dictionaries and custom dictionaries for the specified bundle are loaded
3
Dictionary Merging
Default locales are merged with custom ones, with custom strings having priority
4
Result Generation
Final translation dictionaries used in the application are formed
Localization Architecture
Base Localesmain translation dictionaries with standard strings for all languages
Custom Localescustom dictionaries with overridden strings for specific bundles
Merge Enginemechanism for merging default and custom locales during build
Bundle Configbundle configuration specifying custom dictionaries for overrides
Flexible Localization Benefits
Flexibility in interface customization for different clients
Time savings in maintaining multiple translation versions
Reduced probability of errors when updating locales
Simplified process of adding new custom translations
Maintaining a single codebase for all bundles
Quick deployment of customized versions
Universal Aircraft Seat Map Display System
The implemented system allows displaying aircraft seat maps from various booking systems through a single universal component using special drivers for data transformation.
Key Component Features
Support for multiple formats
System is capable of working with seat map source data from various booking systems, each having its own unique format.
Universal display component
User interface consists of a single Vue component that visualizes seat map regardless of source or input data format.
Driver system for data
Special adapters (drivers) are used to transform specific data from each provider into unified internal format.
Flexible client configuration
Adding support for new client or booking system requires only creating corresponding driver, without changing system core.
Isolated business logic
All complex validation, display, and seat map interaction logic is encapsulated in universal component and does not depend on drivers.
Quick source connection
To integrate new data source, it's sufficient to implement driver according to ready interface, after which it immediately becomes available for use.
How Map Rendering Works
1
Data Receiving
The system receives seat map data from an external system in a specific format
2
Driver Selection
Based on data type or client, the appropriate transformation driver is selected
3
Data Transformation
The driver transforms incoming data into a unified format for the component
4
Map Rendering
The universal component displays the seat map based on prepared data
Component Architecture
Universal Seat Map Componentmain seat map display component with unified API
Data Driversspecialized drivers for transforming data from different formats
Seat Map Engineengine for processing and preparing data for display
Configuration Managerconfiguration manager for connecting drivers to the component
Universal Component Benefits
Quick connection of new clients with their own data formats
No code duplication in the display component
Simplified system maintenance and updates
Isolation of business logic from data specifics
Architecture scalability
Reduced development time for new integrations
VueCraft NPM
Tools born from real challenges and experience
Control and predictability in every action
SVG optimization with result controlCompress SVG files to minimal size without quality loss. Smart preview shows the original and optimized version — visually and in numbers — before saving.
Raster image compressionReduce JPEG and PNG size without visible quality loss. Fine-tune parameters and compare the original with the result side by side.
CSS gradient builderCreate complex layered gradients with full control. Intuitive preview and ready-to-use CSS code in one click.
Color Palette GeneratorCreate palettes using harmony rules or from an image. Precise editing, contrast and color blindness checks, previews on mockups, and export to CSS, SCSS, Tailwind, and JSON.
Layout units converterConvert px, rem, em, % and vw/vh in real time. Flexible root and parent font‑size settings — get ready‑to‑use code instantly.
View, edit, and convert dataOpen JSON, YAML, TOML, CSV, XML, and other formats: view data as text, tree, or table, convert with a loss report, compare, validate against a schema, and merge from multiple sources. Everything runs in the browser.
Favicon generatorCreate website icons with full control. Smart preview shows the result before saving — visually and in numbers.
Strong password generatorFlexible length settings, character sets, and exclusion of ambiguous characters. Visual strength meter shows the complexity level before saving.
A puzzle where the Rubik's cube meets a stream of plasma: turn the faces so that energy travels from the source to the receiver, or build a level of your own.
- Lay the plasma pathPlasma flows across the faces of the cube, and every layer turn changes its route. Build an unbroken path and the stream reaches its goal.
- Create your own levelThe builder lets you place tiles, bonuses and checkpoints, set the scramble, check that the level can be solved and share it with a link.
- Three modesThe cyber cube with its plasma flow, the classic puzzle and the dodecahedron — kilominx and megaminx. Sizes from 2×2.
Airlines
Route networks, airports, and flight visualization — all in one place. Plot a route from point A to point B in a second. A tool for those who want to see the whole picture.
692Airlines
3,776Airports
92,197Routes
All of an airline's destinations at oncePick a carrier and see where it flies: hubs, long-haul lines, and connections between cities. No installation, right in your browser.
The same network on a 3D globeSwitch to 3D and watch routes curve around the planet. The flat map is one click away.
Hubs, clusters, and who flies thereThe airports mode groups points into clusters, shows statistics, and lists the airlines at each hub.
Macrulez blog
In my blog I share my experience as a frontend developer: I break down tasks, share solutions, and publish notes about working with the modern web.
Design Foundation — From Visual Communication to Code
A fundamental understanding of composition, typography, and color theory, acquired through graphic design, forms the basis for creating logical, aesthetic, and effective digital interfaces.
Remote Workplace
Ready for effective work from anywhere
A fully equipped space for productive remote work. Everything needed for comfortable development and communication with the team.
Productive Workstation
Powerful computer for working with modern IDEs and simultaneous running of multiple development environments
Three Monitors
Large monitors for comfortable separation of code, browser, and communication applications
Stable Internet
High-speed wired connection for video conferences and fast code synchronization
Webcam and Headset
Quality camera and headset for daily team meetings
Benefits for the Team
Instant switching between tasks
Parallel work on code and communication
Quick response to team messages
Quality participation in planning and code review
Readiness for frequent video meetings
Reduced communication time
Contacts
Get in touch with me in a convenient way
Contact Form
Write to me directly using the form below