How I Built an Interactive 'Wiki-Killer' for Dragon Quest VII using Astro & Tailwind

Source: Dev.to

The Problem: Game Wikis Are Broken 📉

I’ve been playing the new Dragon Quest VII Reimagined Demo (Switch 2 / Steam), and I ran into a frustration that every RPG gamer knows:

• Old School Text Guides (GameFAQs) are hard to parse on a phone while playing.
• Modern Wikis (Fandom, etc.) are often bloated with ads, slow to load, and auto‑playing videos.

I didn’t just want to read a guide; I wanted to track my progress. I needed to know which Shard Fragments I had missed and which Mini Medals were hidden in the well.

So, instead of complaining, I spent my weekend building a solution: The Adventure Log.

The main dashboard tracking demo completion

---

The Tech Stack: Why Astro? 🚀

I needed this tool to be:

• Fast: Instant load times on mobile data.
• Interactive: Checkboxes, filters, and progress bars.
• Simple: No backend, no login required.

Astro (The Framework)

I chose Astro because it defaults to Zero JS. Most of a game guide is static content (images, text, tables). React or Next.js would have been overkill and introduced unnecessary hydration bloat.

With Astro, I can build components like <Component /> using JSX syntax, but they render as pure HTML unless I explicitly ask for interactivity using client:load.

Tailwind CSS (The Styling)

I wanted a UI that felt like a modern RPG menu—clean, card‑based, and responsive. Tailwind’s utility classes made it easy to build a grid layout that switches from 1 column on mobile to 3 columns on desktop without writing custom media queries.

LocalStorage (The “Database”)

I didn’t want to manage a database or force users to create an account just to tick off a checkbox. I used a simple useLocalStorage hook (via Preact/React) to persist the user’s checklist state directly in their browser.

// Simplified logic for the checklist state
const [collected, setCollected] = useState(() => {
  if (typeof window !== 'undefined') {
    return JSON.parse(localStorage.getItem('dq7-shards') || '[]');
  }
  return [];
});

const toggleShard = (id) => {
  const newSet = collected.includes(id)
    ? collected.filter(i => i !== id)
    : [...collected, id];

  setCollected(newSet);
  localStorage.setItem('dq7-shards', JSON.stringify(newSet));
};

---

Key Features 🛠️

1. The Interactive Shard Locator – DQ7 requires you to find color‑coded fragments to unlock new islands. I built a filter system that lets users sort by color (Red/Green/Yellow) and region.

2. “Missable” Warnings – The app highlights items that become inaccessible after certain story points using visual badges (e.g., “Story Heavy” or “One‑Time Visit”). This saves completionists from restarting their game.

3. Visual Loot Guide – Instead of text saying “It’s in the chest,” I used aspect‑video cards to show the exact in‑game screenshot.

{guide.difficulty}

---

The Result: 100% Lighthouse Score ⚡️

Because Astro strips away unused JavaScript, the site scores a perfect 100 on Google Lighthouse performance metrics. It feels like a native app, but it’s just HTML and CSS.

---

Conclusion

This project reminded me why I love web development. We have the power to build the tools we wish existed.

If you are playing the DQ7 Demo, give it a try!

🔗 Live Demo:

💻 GitHub: Insert Repo Link if Open Source

Thanks for reading! Let me know in the comments if you prefer Astro or Next.js for static sites.