Deep Dive: The Architecture & Science Behind HubbleQuiz — A 10-Minute Career Debugger

HubbleQuiz is a web tool designed for software engineers with 0–5 years of experience who want to gain clarity on their career growth. In under 10 minutes, it surfaces your top strengths, uncovers hidden blockers, benchmarks you against real-world roles, and—if you opt in—delivers a personalized roadmap to level up your technical and soft skills. Here is the tool if you want to check: https://hubblequiz.com/ When I set out to build HubbleQuiz, I wanted more than just a neat quiz and a PDF—every question needed a solid scientific foundation, and every narrative conclusion had to feel handcrafted. Below is how the pieces fit together, from question design to AI-driven report generation. High-Level Overview At its heart, HubbleQuiz is a React single-page app that calls a suite of AWS Lambdas (via API Gateway) and Step Functions to deliver instant snapshots and richer premium reports. Frontend: React + Theme UI, hosted & CI/CD via AWS Amplify API Layer: API Gateway routes to four Lambdas (quiz, async report, Stripe, email) Orchestration: AWS Step Functions for multi-step premium report generation Storage: DynamoDB for user data; S3 for generated PDFs Mail: Mailjet for transactional emails 1. Frontend Stack: React with Theme UI Hosting & CI/CD: AWS Amplify — auto-builds on each Git push, deploys to a CDN State Management: React Context + custom hooks for quiz progress Key challenge: Keeping the bundle lean so the 40-question flow loads in under 1 second. We used React.lazy and code-splitting around question blocks. 2. API & Serverless API Gateway → Lambdas /quiz: serves question sets + evaluates answers /report-async: triggers a Step Function (avoids 29 s timeout) /stripe-webhook: handles payments + unlocks premium /send-email: sends report link via Mailjet Separation of concerns: Fine-tuned memory/time per function Isolated Stripe logic from core quiz flow Reduced blast radius of cold-start delays 3. Question Design & AI-Driven Reporting Scientific Roots: every question is backed by: Dreyfus Model of Skill Acquisition (novice → expert progression) Cognitive Science research on developer mental models (MIT studies) 1:1 mentor prompts refined over 200+ mentorship sessions Quiz Engine: Dynamically selects 40 core questions, then 10 follow-ups based on your answers AI Narrative: Answers are fed through multiple LLMs (GPT-4, Claude, Llama 3) An orchestration layer scores and stitches the best generated insights into your final report 4. Data & Benchmark Pipeline Sources: Public salary APIs (Glassdoor, Payscale) Anonymous beta-user survey data Quarterly CSVs from the Bureau of Labor Statistics (BLS) Ingestion & ETL: AWS Glue nightly jobs normalize, compute percentiles (P25, P50, P75) Results written as Parquet on S3 Lookup: Lambdas query precomputed metrics in DynamoDB, keyed by role#level#region for low-latency reads 5. Report Generation Charts: Interactive (browser) with Recharts Static (server) via Chart.js + node-canvas Templating: Handlebars HTML + inlined CSS matching our blue palette PDF Export: Puppeteer in a dedicated Lambda → renders HTML → PDF → stored in S3 6. Orchestration & Storage AWS Step Functions sequence the premium flow: Invoke report Lambda Run chart-generation jobs Assemble HTML with benchmarks & charts Render PDF via Puppeteer Store PDF in S3 Trigger the /send-email Lambda User profiles and metadata live in DynamoDB; actual PDFs are versioned in S3. 7. CI/CD & Deployment We rely entirely on AWS Amplify: Connect GitHub → Amplify On each main push: Run tests & build Deploy static site + updated CloudFormation for Lambdas & Step Functions Auto-rollback on failed deploys, built-in monitoring & alerts Lessons Learned & Next Steps Cold-start optimization: boosting Lambda memory cut ~200 ms off cold starts. Timeout workarounds: Step Functions solved the 29 s API Gateway cap. Bundle size: code-splitting around question blocks was critical for instant load. Coming soon: A/B testing of question variants via feature-flagged Lambdas Full internationalization (i18n) in reports ML-driven question suggestions based on cluster analysis of profiles That’s the full stack—and the science & AI—powering HubbleQuiz. If you’ve built something similar or have thoughts on our question methodology or LLM orchestration, I’d love your feedback! If reached that long, please take a look on the tool and let some feedback on it: https://hubblequiz.com/ — Juan (creator of HubbleQuiz)

May 11, 2025 - 10:35

Deep Dive: The Architecture & Science Behind HubbleQuiz — A 10-Minute Career Debugger

HubbleQuiz is a web tool designed for software engineers with 0–5 years of experience who want to gain clarity on their career growth. In under 10 minutes, it surfaces your top strengths, uncovers hidden blockers, benchmarks you against real-world roles, and—if you opt in—delivers a personalized roadmap to level up your technical and soft skills.

Here is the tool if you want to check: https://hubblequiz.com/

When I set out to build HubbleQuiz, I wanted more than just a neat quiz and a PDF—every question needed a solid scientific foundation, and every narrative conclusion had to feel handcrafted. Below is how the pieces fit together, from question design to AI-driven report generation.

High-Level Overview

At its heart, HubbleQuiz is a React single-page app that calls a suite of AWS Lambdas (via API Gateway) and Step Functions to deliver instant snapshots and richer premium reports.

Frontend: React + Theme UI, hosted & CI/CD via AWS Amplify
API Layer: API Gateway routes to four Lambdas (quiz, async report, Stripe, email)
Orchestration: AWS Step Functions for multi-step premium report generation
Storage: DynamoDB for user data; S3 for generated PDFs
Mail: Mailjet for transactional emails

1. Frontend

Stack: React with Theme UI
Hosting & CI/CD: AWS Amplify — auto-builds on each Git push, deploys to a CDN
State Management: React Context + custom hooks for quiz progress
Key challenge: Keeping the bundle lean so the 40-question flow loads in under 1 second. We used React.lazy and code-splitting around question blocks.

2. API & Serverless

API Gateway → Lambdas
- /quiz: serves question sets + evaluates answers
- /report-async: triggers a Step Function (avoids 29 s timeout)
- /stripe-webhook: handles payments + unlocks premium
- /send-email: sends report link via Mailjet
Separation of concerns:
- Fine-tuned memory/time per function
- Isolated Stripe logic from core quiz flow
- Reduced blast radius of cold-start delays

3. Question Design & AI-Driven Reporting

Scientific Roots: every question is backed by:
1. Dreyfus Model of Skill Acquisition (novice → expert progression)
2. Cognitive Science research on developer mental models (MIT studies)
3. 1:1 mentor prompts refined over 200+ mentorship sessions
Quiz Engine:
- Dynamically selects 40 core questions, then 10 follow-ups based on your answers
AI Narrative:
- Answers are fed through multiple LLMs (GPT-4, Claude, Llama 3)
- An orchestration layer scores and stitches the best generated insights into your final report

4. Data & Benchmark Pipeline

Sources:
- Public salary APIs (Glassdoor, Payscale)
- Anonymous beta-user survey data
- Quarterly CSVs from the Bureau of Labor Statistics (BLS)
Ingestion & ETL:
- AWS Glue nightly jobs normalize, compute percentiles (P25, P50, P75)
- Results written as Parquet on S3
Lookup:
- Lambdas query precomputed metrics in DynamoDB, keyed by role#level#region for low-latency reads

5. Report Generation

Charts:
- Interactive (browser) with Recharts
- Static (server) via Chart.js + node-canvas
Templating: Handlebars HTML + inlined CSS matching our blue palette
PDF Export: Puppeteer in a dedicated Lambda → renders HTML → PDF → stored in S3

6. Orchestration & Storage

AWS Step Functions sequence the premium flow:

Invoke report Lambda
Run chart-generation jobs
Assemble HTML with benchmarks & charts
Render PDF via Puppeteer
Store PDF in S3
Trigger the /send-email Lambda

User profiles and metadata live in DynamoDB; actual PDFs are versioned in S3.

7. CI/CD & Deployment

We rely entirely on AWS Amplify:

Connect GitHub → Amplify
On each main push:
- Run tests & build
- Deploy static site + updated CloudFormation for Lambdas & Step Functions
Auto-rollback on failed deploys, built-in monitoring & alerts

Lessons Learned & Next Steps

Cold-start optimization: boosting Lambda memory cut ~200 ms off cold starts.
Timeout workarounds: Step Functions solved the 29 s API Gateway cap.
Bundle size: code-splitting around question blocks was critical for instant load.

Coming soon:

A/B testing of question variants via feature-flagged Lambdas
Full internationalization (i18n) in reports
ML-driven question suggestions based on cluster analysis of profiles

That’s the full stack—and the science & AI—powering HubbleQuiz. If you’ve built something similar or have thoughts on our question methodology or LLM orchestration, I’d love your feedback!

If reached that long, please take a look on the tool and let some feedback on it: https://hubblequiz.com/

— Juan (creator of HubbleQuiz)