Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/full-stack-sorcerer/llms.txt

Use this file to discover all available pages before exploring further.

The /case-studies route — titled Crypt Notes in the site’s navigation — renders two in-depth post-mortems on real-world engineering and design challenges. Each study is presented as a textured, aged-parchment card with a noise-overlay background. Clicking a card triggers a Framer Motion modal that rotates in on the Y-axis like a book page turning, then displays the full body text with a large drop-cap first letter anchored in the top-left corner.

​
Case Studies at a Glance

The Haunting of Legacy Code

How we exorcised a 10-year-old monolithic application — banishing phantom dependencies and zombie processes to achieve a terrifying 60% reduction in load times.

Resurrecting the User Experience

Bringing a dead UI back to life with modern React — guiding lost users through the funnel until conversion rates rose from the grave by 45% in the first month.

​
The Haunting of Legacy Code

​
Problem & Context

The codebase had accumulated a decade of cruft: phantom dependencies, zombie processes that refused to die, and a monolithic Node.js architecture that made every deploy feel like summoning a demon. Page load times were punishingly slow and the tight coupling between services meant a single failing module could haunt the entire application.

​
Approach

The migration followed a strangler-fig pattern — new Next.js microservices were introduced alongside the legacy monolith, gradually choking it out. Key steps included:
  • Dependency audit — cataloguing and removing undead packages that were imported but never used.
  • React → Next.js migration — converting the client-rendered React SPA to Next.js for server-side rendering and automatic code splitting.
  • Microservices extraction — decoupling authentication, data-fetching, and rendering into independently deployable services.
  • CI/CD hardening — adding automated integration tests at each service boundary so no ghost processes could slip through.

​
Outcome

MetricBeforeAfter
Initial page loadBaseline−60 %
Deploy confidenceLowHigh
Service couplingMonolithicIndependent
Once upon a midnight dreary, while I pondered, weak and weary, over many a quaint and curious volume of forgotten Node.js modules — we began the great migration. The codebase was riddled with phantom dependencies and zombie processes that refused to die. By implementing a strict microservices architecture, we managed to banish the monolithic beast back to the underworld, reducing load times by a terrifying 60%.

​
Resurrecting the User Experience

​
Problem & Context

The interface was cold and lifeless — a mere skeleton of what it could be. Users wandered the site like lost souls, failing to complete key actions. Heatmaps showed interaction drop-off at every major conversion point, and session recordings revealed confusion around navigation and call-to-action placement.

​
Approach

The redesign centred on purposeful motion and clarity:
  • Framer Motion animations — subtle entrance animations, hover states, and page-transition effects guided users through the funnel without feeling gimmicky.
  • Information architecture overhaul — key CTAs were surfaced earlier in the scroll journey.
  • Component-level UX audit — every interactive element was reviewed against WCAG accessibility guidelines and updated accordingly.
  • A/B testing — the new animated UI was rolled out to 50 % of traffic for four weeks before a full launch.

​
Outcome

MetricBeforeAfter
Conversion rateBaseline+45 %
Avg. session durationBaselineIncreased
Bounce rateHighReduced
The interface was cold, lifeless, a mere skeleton of what it could be. Users wandered the site like lost souls. We introduced Framer Motion to breathe life into the interactions, adding subtle, delightful animations that guided users through the funnel. Conversion rates rose from the grave, increasing by 45% in the first month.

​
Adding a New Case Study

Case studies are stored in a plain JavaScript array inside the case-studies page component. To add a third entry, append an object that matches the following shape: 
{
  id: 3,
  title: "Case Study Title",
  excerpt: "One-line teaser description.",
  content: "Full body text of the case study goes here. Start with a compelling first paragraph..."
}
FieldTypePurpose
idnumberUnique key used by React for list rendering
titlestringDisplayed as the card heading and modal <h2>
excerptstringShort teaser shown on the parchment card
contentstringFull prose rendered inside the modal; the first character is automatically pulled out and styled as a large drop-cap
The modal entrance animation is powered by Framer Motion’s rotateY spring transition — it opens from rotateY: -90 to rotateY: 0, mimicking a book page turning toward the reader. The exit mirrors this in reverse (rotateY: 90). The modal close button uses the X icon (lucide-react x). Ensure the modal’s parent container has perspective-1000 applied so the 3-D rotation renders correctly in all browsers.

Build docs developers (and LLMs) love

Get started for freeTalk to us