Test Preparation App

Background

This large-scale Web App serves students pursuing degrees in higher education in the medical and legal fields. The name is excluded from this case study for client privacy and disclosure reasons, but it provides an excellent example of a modern tech stack driving cutting-edge software.

Challenges

Several Degrees and Themes in One App

1. The app must support a variety of learners pursuing different goals in higher education, including MCAT, LSAT, PA, NP, and more.
2. The practice exam interface must closely match the real test-taking interface learners will experience when they sit for the actual exam. This includes significant theming differences - not just color schemes but icons and layouts as well.

Frequent Data Updates

1. User interactions on the app must stay in-sync between the frontend and backend. Many actions may be taken per minute including applying different markups to question prompts, changing answers, or navigating between questions. Reliably capturing all user actions is of paramount importance.

Protection Against Network Disconnects

1. With the frequency of user actions in the app, it is particularly important that queued actions do not get lost in the case of network disconnects.
2. The app needs to store any actions remaining in the queue and send them to the backend at the next available opportunity.

Distinct Products with Separate Feature Access

1. Customers may select from a variety of product offerings which provide access to different combinations of features.
2. Some learners may only be interested in the practice exams, while others may also want to create custom practice sets or review material via learning modules.

Choice of Tech Stack

Performance

1. Next.js ensures lightning-fast navigation between routes and is especially valuable in situations where the majority of the components on the page do not need to re-render. The practice exam interface is a prime example of this: the toolbars, question navigation, and layout should not re-render when navigating between questions because only the question prompt and answer choices are different.

Theming

1. Mantine UI is a component library that not only offers an extensive selection of high-quality reusable components, but it also supports theming out of the box. Defining themes for each of the different exams that learners may be studying for allows components to be styled with one set of variables that correspond to different color and spacing values depending on the active theme.

Data

1. GraphQL streamlines API calls so that only the relevant fields are included in the query and the reponse. This significantly improves performance of features with heavy data requests, such as exam and practice set listing pages or loading an exam with hundreds of questions.
2. IndexedDB provides a reliable way to back-up data in real time in case of network disconnects. By temporarily storing all user actions in an IndexedDB store and only clearing them when the accompanying network request has succeeded, there will automatically be an updated record of any actions that failed to send. This set of actions can be sent when a connection is re-established or at the start of the next session, whichever comes first.

Feature Access

1. LaunchDarkly is an excellent framework for not only testing feature releases before production rollout but also for controlling which users have access to which features. By wrapping components and features in Feature Flags, it becomes simple to release key features to specific subsets of users with the relevant product access.