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

#showdev #tailwindcss #webdev #javascript

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.

(Caption: 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.

1. 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 <ShardCard /> using JSX syntax, but they render as pure HTML unless I explicitly ask for interactivity using client:load.

2. 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.

3. 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.


javascript
// 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.

HTML

<div class="relative aspect-video w-full overflow-hidden border-b border-gray-100">
  <img src={guide.image} class="object-cover w-full h-full" />
  <div class="absolute bottom-4 right-4 bg-green-100 text-green-800 text-xs font-bold px-2 py-1 rounded">
    {guide.difficulty}
  </div>
</div>
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: [https://dq7reimagined.com/]

💻 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.