I Built the "Anti-Wiki" for Little Nightmares 3 using Astro (100% Lighthouse Score)

The Problem: Game Wikis are Broken
We've all been there. You're playing a game, you get stuck, and you Google a guide. You click on a Wiki link (usually Fandom), and suddenly:

Your fan spins up like a jet engine.

A video auto-plays in the corner.

A massive banner covers 40% of the screen.

Spoiler Alert: You accidentally see a picture of the final boss before the page even loads.

As a fan of Little Nightmares 3, I wanted to create a companion tool that actually respected the player. No bloat, no spoilers, just raw utility.

So, I built LN3 Solved.

The Stack: Why Astro?
I chose Astro for this project because of its "Zero JS by default" philosophy. A game tracker needs to be readable instantly on a phone while the player is holding a controller.

Framework: Astro

Styling: Tailwind CSS

Interactivity: Vanilla JavaScript (No heavy frameworks like React/Vue for simple toggles)

Data Source: JSON files (Flat-file CMS approach)

Key Feature 1: The "No-Backend" Persistence
One of the biggest challenges was allowing users to track their collected items (Dolls, Ghosts, Trophies) without forcing them to create an account. Login forms kill conversion rates.

My solution? Local Storage.

I built a simple hook that syncs the checkbox state directly to the browser.

JavaScript

// Simple logic to persist trophy tracking
function toggleTrophy(id) {
const current = JSON.parse(localStorage.getItem('ln3-trophies') || '{}');
current[id] = !current[id];
localStorage.setItem('ln3-trophies', JSON.stringify(current));
updateUI();
}
This makes the site feel like an "app" without the backend overhead. Users can refresh the page or come back days later, and their progress is saved.

Key Feature 2: Spoiler Protection UI
Most wikis dump all information on the page at once. For a horror-mystery game, this ruins the experience.

I implemented a "Phase-Based" UI for the Boss Guides.

Default State: All boss images and phase strategies are hidden/blurred.

Active State: The user clicks "Show Phase 1".

Logic: I used native browser and custom JavaScript toggles to ensure content is accessible to SEO bots but hidden from human eyes until requested.

Key Feature 3: Data-Driven Components
Instead of hard-coding HTML for every character and enemy, I separated the data into JSON files. This allows me to update stats (like the "Threat Matrix" shown below) without touching the markup.

src/data/enemies.json

JSON

{
"id": "monster-baby",
"name": "The Monster Baby",
"matrix": {
"threat": 9,
"intel": 2,
"power": 10
}
}
This data feeds into a dynamic Astro component that generates the Threat Analysis Matrix, rendering visual bars based on the numeric values.

The Result
By stripping away the heavy SPA (Single Page Application) baggage and sticking to Astro's Islands architecture:

Performance: 100/100 on Google Lighthouse.

LCP (Largest Contentful Paint): < 0.8s.

User Feedback: Players appreciate the "Clean & Fast" experience compared to ad-heavy alternatives.

Check it out
If you are playing Little Nightmares 3 or just want to see a clean implementation of an Astro static site, check it out here:

👉 ln3solved

I'm currently working on a "Chronology Engine" to visualize the game's timeline using vanilla JS. Let me know if you have any feedback on the UX!