upfall
Skip to content
Engineering4 min read

voidX AI Resource System Architecture

A detailed explanation of the design philosophy and implementation methods for a modular content system with GEO optimization and multilingual support.

voidX AI Resource System Architecture
#Architecture#GEO#SEO#Next.js#TypeScript

voidX AI has built a GEO (Generative Engine Optimization) optimized resource system designed to be recognized as a trusted information source by AI crawlers (GPT, Perplexity, etc.). This document provides a detailed explanation of the system's design philosophy and technical implementation.

Design Philosophy#

"Our goal is to create content that is easily understood by both machines and humans. Through structured data and semantic HTML, AI crawlers can accurately grasp information while providing users with an excellent reading experience." — voidX Engineering Team

Core Principles#

  • Machine-Friendly Structure: Structured data delivery through Schema.org JSON-LD
  • Multilingual Scalability: Flexible translation management with locale suffix approach
  • Backend Independence: Data source abstraction through Repository Pattern
  • Developer Experience: Rapid iterative development with Git-based content management

Architecture Overview#

The system consists of three main layers:

Presentation Layer#

UI components displayed to users:

  • ResourceListPage: List page with category filters and grid layout
  • ResourceDetailPage: Detail page with OpenAI-style monotone design
  • AdminEditPage: Content management interface with markdown editor

Data Access Layer#

Abstraction layer for data sources:

  • IResourceRepository: Interface definition for CRUD operations
  • GitResourceRepository: File system-based implementation (Phase 1)
  • ApiResourceRepository: Backend API integration implementation (Phase 2)

Content Layer#

Where actual content is stored:

  • Markdown Files: Frontmatter parsing through gray-matter
  • Asset Storage: Image optimization through cdn.voidx.ai

Technology Stack#

CategoryTechnologyVersion
FrameworkNext.js16.1
RuntimeReact19.2
Markdownreact-markdown + remark-gfm10.x
Frontmattergray-matter4.0
Editor@uiw/react-md-editor4.0
StylingTailwind CSS4.1
i18nnext-intl4.7

Multilingual Content Strategy#

voidX adopted a Locale Suffix approach for multilingual management:

content/resources/
└── voidx-resource-architecture/
    ├── index.md          # Default (ko) - Required
    └── index.en.md       # English - Optional

Fallback Strategy#

  1. If the requested locale file exists, return that file
  2. If the file doesn't exist, return the default (ko) file + set isTranslated: false flag
  3. Display "This content is not yet translated" notice in the UI

Benefits of this approach:

  • Maintains consistency with existing i18n folder structure
  • Easy to track translation progress by file existence
  • Natural mapping to locale field when transitioning to backend

GEO Optimization Strategy#

JSON-LD Structured Data#

All resource pages include three Schema.org schemas:

  • Article: Article metadata including title, publication date, modification date, author, image
  • Organization: voidX AI company information and social links
  • BreadcrumbList: Home → Resources → Category → Article path

Semantic HTML Structure#

The markdown renderer outputs semantically correct HTML tags:

  • <article>: Overall content wrapper
  • <section>: Each H2 section
  • <figure> / <figcaption>: Images and captions
  • <blockquote>: Quotations

RSS Feed#

RSS 2.0 feed is provided through the /resources/rss.xml endpoint. This allows AI crawlers to quickly discover new content.

Backend Integration Guide#

Endpoint specifications needed for Phase 2 backend API transition:

MethodEndpointDescription
GET/resource?locale={locale}List query
GET/resource/{slug}?locale={locale}Detail query
GET/resource/slugsAll slugs list
POST/resourceCreate (Admin)
PUT/resource/{slug}Update (Admin)
DELETE/resource/{slug}Delete (Admin)

Transition method:

  1. Complete lib/resources/apiRepository.ts implementation
  2. Set environment variable RESOURCE_PROVIDER=api
  3. Immediate transition without code changes

Conclusion#

The voidX resource system provides the following values:

  • Ready to Use: Just add markdown files with Git-based workflow and deploy immediately
  • Ready for Scale: Zero-downtime transition when integrating backend through Repository Pattern
  • GEO Optimized: Structured data ensures AI crawler trust
  • Developer Friendly: Familiar markdown writing environment and Admin UI provided

Based on this architecture, voidX AI can effectively manage and deploy various content including company information, product documentation, and use cases.

Read more