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.