Before a single line of frontend user interface was ever generated in our IDE, our project began with a simple, foundational script. We needed data—not proprietary media files, not high-resolution art assets, and not official studio lore books, but raw, relational information.

In the world of web development and fandom applications, there is a dangerous misconception that building a great user experience requires pulling graphics directly from official sources. Early in our process, we fell into that exact trap. We created graphics for title headers, pulled static SVG assets, and used proprietary desktop fonts through design software to make the grid pop.

It looked striking, but it was fragile, non-accessible, and legally vulnerable.

When Scott and I made the hard commitment to build our daily grid game around a strict Fair Use defense, we realized our entire visual and data architecture had to change. We had to embrace Nominative Fair Use: using plain-text names strictly to identify and describe factual relationships, without using a studio's trademarked logos or visual trade dress.

The First Code Ever Written: Sourcing Public Wiki Data

If you want to build a fandom application without triggering copyright infringement, your data provenance matters just as much as your code. Sourcing data directly from official corporate databases can introduce immediate licensing conflicts. Sourcing factual metadata from community-curated public wikis, however, anchors your project firmly in open educational research.

Without Wookieepedia, our application simply could not exist.

The depth, accuracy, and sheer dedication of the editors and contributors who populate the Wookieepedia archives day in and day out provided the bedrock for our entire relational database. Furthermore, their open data accessibility and clear scraping guidelines gave us a legal and technical pathway to build an educational trivia engine. We respect that community so deeply that from day one, right underneath our primary logo on the home screen, we placed an explicit attribution header: Sourced from the Archives at Wookieepedia.

On day one, before we had a single React component or CSS stylesheet, we needed a scraper to extract lore entries from those public wiki archives.

As developers starting out with zero traditional coding experience at the tail end of 2024—right as vibe coding was emerging as a viable paradigm—the thought of writing a complex web scraper from scratch was daunting. During our initial research, we stumbled across an open-source scraper project built eighteen months prior by an independent developer on GitHub named Ray. The data structure in Ray's repository was almost identical to the relational matrix we envisioned for our grid.

Instead of secretly copying the repository, we reached out to Ray directly via email, explained our vision for an educational daily trivia game, and asked for permission to adapt the code. Ray responded with incredible generosity, giving us his full blessing and guiding us to the exact repository branches we needed.

That single open-source interaction gave us a massive boost of momentum. It allowed us to populate a MongoDB database with structured lore categories pulled from Wookieepedia entries: characters, planets, droids, vehicles, and faction roles.

Escaping Static Images: Pure DOM Rendering

Once we had our relational database populated, we turned back to the user interface. In our early prototypes, movie and show titles were stored as static SVG image files. We had generated these using design software, leaning on fonts that came pre-installed on desktop operating systems.

Then came the realization: standard desktop fonts supplied with operating systems are frequently protected by commercial software licenses. You cannot simply embed those font files into a web application without purchasing explicit web-font distribution rights.

Furthermore, static SVG images created two major user experience hurdles:

Zero Dynamic Scaling: Images do not adapt fluidly to drastically different mobile screen viewports without stretching or blurring.

Translation Barriers: An SVG image containing hardcoded English text cannot be automatically translated by web browsers for international players.

We purged every static title graphic from the codebase. Moving away from visual design tools and directly into code opened up possibilities we could never have achieved with static images. Code allowed the UI to feel dynamic, alive, and lightweight.

Typography as World-Building: The Seven-Font Era System

To replace proprietary logos without making the game board feel monotone, we developed an IP-safe typographical system. We wanted each title on the grid to feel distinct and atmospheric while remaining 100% compliant and text-based.

We grouped all media titles into six distinct galactic eras spanning from ancient galactic origins down through the fall of the republic, the rise of the rebellion, and beyond. We then mapped each era to a distinct, legally clear font family, utilizing a total of seven fonts across the entire application:

The Core Saga: Rendered in classic Times New Roman. It provides an immediate, timeless, canonical weight without using trademarked studio typography.

Galactic Eras (1 through 6): Each distinct era was assigned a complementary open-source web font selected to evoke the atmosphere of that specific historical period.

Category Headers & System UI: Built using a clean, functional manifest-style text to maintain high contrast and instant legibility.

We stripped away all glowing border frames, box outlines, and text strokes around the title headers. Instead, every single title was rendered as pure, stark white text (#FFFFFF).

These white titles sit cleanly on the outer periphery of the X and Y axes. There are no dividing lines between them and no decorative borders encasing the letters. They float quietly on the edges of the grid, creating an ultra-clean, minimalist aesthetic.

The visual result was immediate. The board transformed from a cluttered, copyright-risky clone into a crisp, high-tech tactical terminal. It looked like an advanced stellar map interface built for research and analysis.

Legal Disclaimers & Compliant Fandom Precedents

To ensure that no player, visitor, or corporate legal representative could ever confuse our web app with an official studio product, we studied industry compliance leaders who successfully navigate brand-safe fandom experiences. Platforms like Turned Yellow demonstrated how independent creators can offer themed experiences while maintaining transparent disclaimers.

We implemented explicit, plain-text disclaimers across our entire site footer and legal pages:

Clear Non-Affiliation Declarations: Stating plainly that the application is an independent, fan-made project with zero corporate endorsement or sponsorship.

Nominal Text Sourcing Acknowledgments: Explaining that character and location names are indexed purely as descriptive trivia reference points under nominative fair use, with raw lore sourced from community fan wikis.

Open DMCA Takedown Interceptors: Providing a direct contact protocol for intellectual property holders to request text filtering within 24 hours without formal legal escalation.

Summary Takeaways for Indie Developers

Designing for nominative fair use is not a compromise; it is an architectural strength. By stripping away proprietary images, logos, and licensed fonts, you force your application to rely on superior UI layout, clean typography, and fast performance.

Audit Your Assets Early: Delete static SVG logos and licensed desktop fonts before they create distribution bottlenecks.

Honor the Fan Community: Source data from public wikis like Wookieepedia, adhere to their scraping policies, and credit their contributors openly.

Use Pure DOM Text: Rendering titles and data as plain DOM elements unlocks global browser translation, crisp responsive scaling, and complete legal protection.

Keep Visuals Minimal: Clean, floating white text on the periphery creates an elevated, professional UI without needing heavy visual embellishments.

By committing to text-only data and open-source workflows, Scott and I turned a legal challenge into our game's sleekest technical feature.