Dfiance
As avid players of the digital trading card game Dfiance, we saw an opportunity to contribute to the growing community. This is a passion project and quickly evolving into THE external card database and deck building platform that serves as the central knowledge hub for players.
The Dfiance project empowers players with intuitive tools to explore the game’s ever-expanding card collection. Users can search, filter, and discover cards based on multiple attributes including faction, rarity, abilities, and combat values. We designed the system to beautifully display card information while making complex relationships between card types and abilities immediately apparent. The display options even succeed the ingame card viewer, making the web app a perfect companion for aspiring players.
With the Dfiance development team’s support, we’ve integrated directly with their APIs to ensure the web app always displays accurate, up-to-date card information. This collaboration has been instrumental in creating a resource that truly serves the community’s needs.
The user experience was designed to be seamless across all devices. Players often reference cards on their phones while playing physically or on another device, so mobile optimization was non-negotiable. Card detail views present all relevant information in a digestible format that works beautifully on everything from desktop monitors to small phone screens.
We created custom interactive components like ability tooltips, card power level visualizations, and faction filters to enhance the browsing experience and help players understand complex card interactions at a glance.
Community feedback has guided our development process from day one. By actively engaging with players through Discord, we’ve prioritized features that directly address the strategic needs of both casual and competitive players.
Technology Stack
For this pro-bono project, we challenged ourselves to utilize cutting-edge web technologies that would provide the best possible user experience:
Svelte 5 with SvelteKit: We embraced Svelte’s latest version with its runes-based reactivity model, which perfectly suited the dynamic nature of card data visualization. SvelteKit’s robust routing and server-side rendering capabilities ensure lightning-fast page loads and excellent SEO performance.
Skeleton UI v3: Skeleton UI has been our go-to UI library for quite a while and we are using the Dfiance project to play around with the new major version of the framework in a greenfield context.
TailwindCSS 4: We utilized Tailwind’s utility-first approach for responsive layouts and styling, avoiding custom CSS entirely (except for specific animations). This approach dramatically accelerated development while maintaining design consistency.
User Experience Highlights
The interface was designed around core user journeys we identified through our own gameplay experience and community conversations:
- Deck Building: Advanced filtering tools allow players to quickly assemble competitive decks based on synergies, mana curve, and meta considerations.
- Card Discovery: Faceted search lets players narrow down cards by multiple attributes simultaneously, with results updating instantly.
- Meta Analysis: Statistical tools help players understand the current competitive landscape, tracking popular cards and successful deck archetypes.
- Responsive Design: The interface adapts seamlessly from desktop to mobile, recognizing that players reference card information in various contexts.
Community Impact
What started as a passion project has grown into an essential resource for the Dfiance community. The web app now serves the entire player base with fast, accurate card information and strategic insights.
We’re particularly proud of the performance optimizations that keep page loads lightning-fast even on mobile connections, and the accessibility features that make the app usable for all players, including those using screen readers or other assistive technologies.
As the game continues to evolve with new card sets and mechanics, so too will the Dfiance project. Our roadmap includes expanded deck analysis tools, historical meta tracking, and enhanced community contribution features—all driven by our passion for the game and commitment to supporting its growing player base. Maybe we can even use the data in Wingman AI at some point…
This project exemplifies how ShipBit approaches pro-bono work: with the same level of technical excellence, user-centered design, and attention to detail that we bring to client projects. With ambitions to become the go-to deckbuilding and meta analysis site for Dfiance, we’re committed to the long-term growth and success of both the platform and the community it serves.