When a client approached us with an ambitious brief – build three separate, exam-grade digital simulators for McKinsey problem-solving, BCG consulting career assessment, and GMAT preparation – we immediately understood the scale of the challenge.
These weren’t going to be simple multiple-choice quiz tools. They needed to replicate the actual pressure, logic, and complexity of assessments used by the world’s most competitive firms and graduate programs. This is a detailed breakdown of what we built, the technical decisions behind it, and what makes these simulators genuinely different.
The Simulator Brief
Our client needed a consulting simulator app development solution that covered three distinct experiences:
McKinsey Problem-Solving Game – logic-heavy, time-pressured scenarios built around data interpretation and cognitive reasoning BCG Consulting Career Assessment – a blend of behavioral and analytical questions with rubric-based scoring GMAT Simulator – section-wise adaptive testing across Quantitative, Verbal, and Data Insights, where question difficulty shifts in real time based on user performance The common thread across all three: every simulator had to feel authentic. Generic quiz UI was explicitly ruled out. Each product needed to mirror the real assessment’s pacing, interaction style, and scoring methodology.
Choosing the Right Tech Stack
For a project of this complexity, tech stack decisions matter from day one.
We chose Next.js as the primary framework. Its server-side rendering capability gave us fast initial page loads – critical for an assessment platform where users land and immediately begin a timed session. The file-based routing made it straightforward to isolate each simulator into its own clean module while sharing a common component library across all three products. React powered all the in-session logic. Managing live quiz state — timer countdowns, active question tracking, answer selection, adaptive difficulty switching, and section transitions – requires a reactive UI layer that updates instantly without full page reloads. React’s component model let us build each simulator’s question types as independent, testable units that could be reused or swapped without breaking the broader app.
What We Built – Feature by Feature
Adaptive Question Engine
The GMAT simulator uses a dynamic difficulty engine: the system tracks live performance and adjusts the complexity of the next question accordingly. Answer a hard question correctly and the next gets harder. Struggle on an easy one and the system recalibrates. This is what makes a GMAT simulator genuinely useful rather than just a static question bank.
Timed Sections with Auto-Submit
All three simulators support section-wise time limits. When a section timer reaches zero, answers are locked and submitted automatically — exactly replicating real exam conditions. A persistent countdown timer is visible throughout, with visual urgency cues in the final 60 seconds.
Chart-Based Performance Analytics
This is where the product genuinely stands out. After each attempt, users land on a performance dashboard built with interactive charts:
Radar charts — showing strengths and weaknesses across categories (e.g., Data Sufficiency vs Problem Solving for GMAT)
Bar charts — section-wise score breakdown compared against benchmark averages
Line graphs — score progression tracked across multiple attempts over time
This post-attempt analytics layer transforms the simulator from a practice tool into a genuine self-improvement platform. Users don’t just see a final score – they see exactly where they lost marks and how they’re trending over time.
Responsive, Mobile-Ready Design
All three simulators are fully functional on mobile and tablet. Timed assessments are increasingly taken on mobile devices, so this wasn’t optional — it was a core requirement baked in from the wireframe stage.
Score Benchmarking
Each simulator compares the user’s performance against aggregated benchmark averages, giving meaningful context to a raw score. Scoring 68% feels very different when you can see the average user scores 54%.
The Technical Challenges
Building these simulators surfaced a few non-trivial engineering problems worth highlighting. State persistence was one of them. If a user accidentally closes the browser tab mid-session, their progress needed to survive. We implemented session-level state persistence so an interrupted attempt could resume from the exact question where it left off — no lost progress, no frustration.
The adaptive algorithm for the GMAT section required careful calibration. Difficulty tiers had to be clearly defined, questions had to be tagged accurately by difficulty level and sub-topic, and the switching logic had to feel smooth – not jarring – for the user in the middle of a timed session. Chart rendering performance was another consideration. With potentially hundreds of data points across multiple past attempts, performance charts needed to render fast on lower-end mobile devices without blocking the main thread or causing layout shifts.
Tech Stack Summary
Framework: Next.js (SSR, routing, module isolation)
Frontend: React (state management, component architecture)
Charts & Analytics: Interactive chart library (radar, bar, line graphs)
Adaptive Engine: Custom question difficulty algorithm
Responsive Design: Mobile-first, works across all screen sizes
State Persistence: Session-level progress recovery
The Outcome
Three production-ready simulators, each with a distinct UX calibrated to its real-world counterpart. The client now has a differentiated edtech product that goes beyond surface-level quiz apps – one built for serious learners preparing for high-stakes consulting and graduate school assessments.
For us, this project pushed our React architecture skills, required us to think carefully about user experience under exam-like pressure, and resulted in a product we’re proud to have shipped.
Building Something Similar?
If you’re working on an assessment platform, an adaptive learning tool, a quiz engine, or any kind of interactive simulator – we’ve done this before and we’d love to hear about your project.
We work with startups, edtech companies, and businesses across the globe to build custom web applications using Next.js, React, and modern web technologies.
