Engineering Ladders Picker — Career Level Assessment Tool
A web-based Engineering Ladders assessment tool that helps engineers pick axis levels, compare against reference ladders, and export a clean PDF summary.
The Problem
Engineering career ladders are useful, but they are often hard to discuss in a practical way. A static ladder page gives the expectations, but engineers and managers still need to translate those expectations into a personal profile: where someone is strong, where they are still growing, and which reference role level they most closely resemble.
The original Engineering Ladders framework is clear and thoughtful, but I wanted a small tool that makes the first conversation easier. Instead of asking someone to choose a role first, the app asks them to pick evidence-based levels across the five framework axes.
The Solution
Engineering Ladders Picker is an interactive self-assessment app based on the public Engineering Ladders reference. Users select a level from 1 to 5 for each axis:
- Technology
- System
- People
- Process
- Influence
The result stays hidden until all five choices are selected. After that, the app shows the closest reference role and level, a radar chart, selected-level summary, closest reference matches, and a PDF export for career conversations.
Live Demo
The app is embedded below from Vercel. You can also open the live version directly at engineering-ladders-picker.vercel.app.
Architecture
This project is intentionally simple: a static HTML, CSS, and JavaScript app with no framework dependency.
Engineering Ladders Picker
├── Static UI
│ ├── HTML structure
│ ├── CSS dark cyber theme
│ └── Responsive split-panel layout
├── Assessment Logic
│ ├── Five Engineering Ladders axes
│ ├── Reference role/level matching
│ └── Summary generation
├── Visualization
│ └── Canvas radar chart
└── Export
└── Browser-native print/PDF report
Key Features
- Answer-first flow — Users pick levels before seeing any role result.
- Reference descriptions — Every 1-5 option includes the original framework meaning.
- Closest match calculation — The app compares selected levels with Developer, Tech Lead, Technical Program Manager, and Engineering Manager reference ladders.
- Radar chart — A compact visual summary of the selected engineering profile.
- PDF export — Generates a clean portrait report with the chart, summary, selected levels, framework notes, and closest matches.
- Portfolio-ready styling — Styled to match the dark cyber visual system used on this site.
References
The app is based on these Engineering Ladders pages:
What I Learned
This was a good reminder that career tools should not reveal conclusions too early. If the app shows a role before the user finishes selecting evidence, the assessment becomes biased. Hiding the result until all five axes are complete makes the flow feel more honest.
The PDF export also had a useful constraint: browser print styles behave differently from screen styles. The final report uses explicit print pages, portrait sizing, and a separate high-contrast chart image so the exported summary stays readable.
More Projects
30 Days Web Challenge — Community-Driven Daily Build Experiment
An interactive web experiment where strangers vote on features to build over 30 days, powered by Next.js with real-time voting, animated UI, and daily progress tracking.
CSSKit — Open-Source CSS Animation Library with 310+ Animations
A free, open-source CSS animation library built with Astro and React. Browse 310+ animations across 11 categories, customize parameters live, and copy-paste into your project. Zero dependencies.
Event Photo Platform — OCR Bib Number Detection System
Full-stack monorepo with dual OCR providers, async BullMQ job processing, S3 storage, and real-time bib number search for race event photography platforms.
Festival Jamu Nusantara — Event & QR Check-in Platform
Full-stack event platform for Indonesian jamu festival with QR check-in, member points, gallery system, and Filament admin panel. Built with Next.js and Laravel.
More Projects
30 Days Web Challenge — Community-Driven Daily Build Experiment
An interactive web experiment where strangers vote on features to build over 30 days, powered by Next.js with real-time voting, animated UI, and daily progress tracking.
CSSKit — Open-Source CSS Animation Library with 310+ Animations
A free, open-source CSS animation library built with Astro and React. Browse 310+ animations across 11 categories, customize parameters live, and copy-paste into your project. Zero dependencies.
Event Photo Platform — OCR Bib Number Detection System
Full-stack monorepo with dual OCR providers, async BullMQ job processing, S3 storage, and real-time bib number search for race event photography platforms.
Festival Jamu Nusantara — Event & QR Check-in Platform
Full-stack event platform for Indonesian jamu festival with QR check-in, member points, gallery system, and Filament admin panel. Built with Next.js and Laravel.
Semesa Grande — Residential Community Management App
Full-stack PWA with role-based dashboards, kas payment tracking, audit workflows, asset borrowing, document management, and push notifications for communities.
BSpace — Mining Operations and Workforce Management
Flutter mobile app for BUMA mining operations with offline-first task management, GPS telematics, mission tracking, photo validation, and growth dashboards.
Interested in Something Similar?
Need a similar project built, want to collaborate, or have questions about the tech stack? Drop a comment below or reach out directly.