web

Operations management for modern teams.

Client

Flexecution

Role

Frontend Developer

Timeline

November 2023 - August 2024

Overview.

Flexecution is an enterprise project management and ERP system built for managing projects, vendors, customers, work orders, and documents. It supports multi-tenant deployments with separate vendor, customer, and admin portals via subdomains, granular role-based access control with JSON security profiles, and a feature-based architecture spanning 28 modular features, 23 custom hooks, and full audit logging.

THE CHALLENGE

Businesses managing multiple projects, vendors, and customers relied on disconnected tools — separate spreadsheets for tracking, siloed CRMs, and manual work order processes. This fragmentation led to data inconsistencies, missed deadlines, and poor visibility across operations, with no unified audit trail or role-based access across the organization.

Built a full-stack enterprise platform with a React + Express.js monorepo architecture, 28 feature modules with clean separation, MySQL with Sequelize ORM for structured data including GEOMETRY points for geospatial tracking, multi-storage document management (AWS S3, Google Drive, local filesystem), JWT + session-based auth with account lockout and device fingerprinting, and comprehensive audit logging on every data modification.

THE SOLUTION

Gallery.

Full platform walkthrough showing 28 feature modules — project management, work orders, vendor/customer portals, and reporting with Excel export.

Video

Enterprise dashboard with project, customer, vendor, and work order summaries — powered by TanStack React Query v4 and Zustand state management.

Work order system with budgeting, PM assignment, scheduling, status tracking, and polymorphic notes via Lexical rich text editor.

Work order calendar view for scheduling and deadline tracking — with custom fields (JSON) and full audit trail on every modification.

Work orders plotted on Google Maps with MySQL GEOMETRY points, Places API autocomplete, and geospatial address validation.

TECHNOLOGY

Tech Stack.

Frontend

React 18 + TypeScript

Core framework with type safety

Vite 4 (+ Webpack)

Build tool with vendor bundle splitting

React Router v6

Routing with lazy loading, Suspense, Error Boundaries

Zustand (custom reset)

Client state with resetAllStores() for logout cleanup

TanStack React Query

Server state with Query Key Factory pattern for cache invalidation

TanStack React Table v8

Data tables with sorting, filtering, view management, column management

React Hook Form + Yup (extended)

Form management with custom email/URL validators

Radix UI + Headless UI

Accessible primitives (Dialog, Dropdown, Popover, Select)

Tailwind CSS + tailwindcss-animate

Styling with dark mode (HSL-based color variables)

Lexical (24 plugins)

Rich text editor — drag-drop, images, code highlighting, markdown shortcuts, collapsible blocks, floating toolbars, color picker, link preview

ExcelJS

Formatted Excel report export

react-dropzone

File upload with drag-and-drop

react-resizable-panels

Resizable panel layouts

MDX

Searchable help system with component documentation

Vitest + MSW

Unit testing with mock service workers

Backend

Node.js + Express 4

REST API server with modular domain architecture

MySQL (mysql2) + Sequelize 6

Relational database with GEOMETRY support for geospatial data

express-session + express-mysql-session + Memcached

Session persistence with caching

JWT (access 24h + refresh 48h)

Token-based auth with Axios interceptor auto-refresh

node-device-detector + express-device

Device fingerprinting per session (browser, OS, device)

Multer

File upload handling

Nodemailer (Gmail SMTP)

Email templates with {{placeholder}} replacement for OTP and password reset

Third-Party Integrations

Google Maps + @vis.gl/react-google-maps

Map views, geocoding, vendor map browsing

Google Places Autocomplete

Address validation and autocomplete

Google Drive / Picker API

Cloud document management and browsing

AWS S3 (@aws-sdk)

Cloud file storage with presigned URLs

Infrastructure & DevOps

AWS (EC2 + MySQL)

Production hosting with private subnet database

PM2

Production process management (ecosystem.config.js)

ESLint + Prettier + Husky + ts-prune + knip

Code quality, pre-commit hooks, dead code detection

CAPABILITIES

Key Features.

Project & Work Order Management

Full project lifecycle — budget tracking (total dollars, installer costs, other costs, per-site), timeline management, financial metrics (gross margin, probability percentages)

Multiple sales owners and project managers per project with brand assignment and referral source tracking

Master work orders (templates) + individual instances with budget vs actual tracking, expense categories, billable flags, vendor assignment

Sites linked to projects with geographic coordinates and status tracking

Vendor Management (5 Sub-Modules)

Vendor master records with 5 sub-modules: Contacts, Addresses, Insurance (with dropzone file upload), Skills, Locations

Google Maps integration — map-based vendor browsing with geocoding

Recruiter assignments via many-to-many junction table

Vendor-user linking for portal access control

Advanced Data Tables (TanStack v8)

Multi-column sorting with visual indicators and complex filtering (text, numeric, date range, boolean)

View management — save/load custom views, default views, system vs user views

Column management — show/hide, reorder, resize with configurable pagination (10/25/50/100)

Excel export with ExcelJS (formatted data), row selection, inline actions (edit, delete, clone), sticky headers

Rich Text Editor (Lexical — 24 Plugins)

AutoLink, ClickableLink, CodeHighlight, CollapsiblePlugin (collapsible content blocks)

DragDropPaste, DraggableBlockPlugin (block-level dragging), FloatingLinkEditor + FloatingTextFormatToolbar

ImagesPlugin with ImageResizer, MarkdownShortcut (real-time markdown conversion)

ColorPicker (text/highlight colors), LinkPreview (URL previews), HtmlPlugin

Security & Access Control

7 security profiles: Super Admin, Admin, User, Manager, Sales, Accounting, Accounting Manager

Granular JSON-based permissions per module (view, edit, add, delete) enforced at UI + API level

JWT with access (24h) + refresh tokens (48h), Axios interceptors for auto-refresh (infinite loop prevention)

Account lockout after 5 failed attempts, OTP password reset (email → OTP → temp password → forced change)

Device fingerprinting via node-device-detector + express-device (browser, OS, device per session)

Forced password change on first login for admin-created accounts

Document & Notes System

Multi-storage document management — AWS S3 (presigned URLs), Google Drive/Picker, local filesystem

Polymorphic notes attached to any entity via Lexical rich text editor

Polymorphic documents via parentTable/parentId pattern with file type classification

Audit & Logging

Access logs — every login, logout, password reset, account lockout with IP, device, timestamp

Change/audit logs — every data modification tracked with table, column, old value, new value, who, when

Automatic logging via transaction middleware on all save/edit operations

File-based logging with daily rotation (180-day retention), separate files per log type

Dashboard & UI

Dashboard with Planning, Schedule, Quality Control, Billing cards and Google Maps sites view

Full dark mode with HSL-based color variables (class-based Tailwind strategy)

Toast notification system via Zustand (info, success, warning, error with auto-dismiss)

50+ reusable UI components, 15+ form input types, 60 button combinations, 9 modal variants

MDX-based searchable help system with component documentation

IMPACT

Results.

010+UI ComponentsReusable components with 15+ form input types

020Lexical PluginsRich text editor with drag-drop, images, code, markdown

030Security ProfilesSuper Admin, Admin, User, Manager, Sales, Accounting, Accounting Manager

040+Database TablesRelational models with GEOMETRY and JSON fields

050Button Variants3 variants × 4 colors × 5 sizes

060Feature ModulesSelf-contained with own API, types, components, routes

ENGINEERING

Architecture.

01Feature-First Architecture — each feature self-contained with its own API layer, types, components, and routes

02Query Key Factory Pattern — structured query keys (all → lists → getAll → getOne) for precise cache invalidation

03Interceptor-Based Auth — Axios request/response interceptors for automatic token injection and refresh (infinite loop prevention)

04Transaction Middleware — automatic audit log creation on every database save/edit operation

05Custom Zustand with resetAllStores() — enhanced create for logout cleanup across all stores

06Multi-Context Architecture — AuthProvider, MulticolumnContext, AppProvider layered with React Context

07Session Storage Caching — paginated API results cached in sessionStorage for performance

08Route-level lazy loading with Suspense boundaries + Error Boundaries per route

09Multi-tenant SaaS with 3 subdomain-isolated portals and 7 security profiles

10Lexical editor with 24 plugins — collapsible blocks, drag-drop, floating toolbars, image resize, markdown shortcuts

11TanStack React Table v8 with view management, column management, and formatted Excel export

12File-based logging with daily rotation (180-day retention), separate files per log type

Deployment

AWS EC2 for backend hosting

AWS MySQL (private subnet at 172.31.24.68)

PM2 for production process management

Subdomain routing — pm., customer., vendor. on flexecutioninc.com

Previous ProjectNever miss a critical email

Next ProjectA CRM built for insurance sales

Get in Touch