Introduction & Setup
Relevant source files
The following files were used as context for generating this wiki page:
The DXKB (Disease X Knowledge Base) is a comprehensive bioinformatics platform designed for disease surveillance, outbreak monitoring, and viral genomic research. It provides a suite of tools for data analysis, visualization, and real-time tracking of pathogens, integrating resources from partner platforms like the Bacterial and Viral Bioinformatics Resource Center (BV-BRC).
The project is built using Next.js 15+ and leverages a modern React ecosystem to provide high-performance genomic data processing and user workspace management. The platform supports authenticated access to private workspaces where researchers can manage jobs, datasets, and analysis results.
Sources: src/app/(footer)/faq/page.tsx:14-25, README.md:1-5, package.json:28, src/app/layout.tsx:21-24
Project Architecture & Dependencies
The DXKB application is a Next.js project bootstrapped with create-next-app. It uses the App Router architecture and is styled using Tailwind CSS with a focus on accessibility and customizability through Radix UI and Shadcn components.
Core Technology Stack
| Category | Technology |
|---|---|
| Framework | Next.js 16.1.7 |
| Language | TypeScript |
| State Management | TanStack Query (React Query) v5 |
| Form Handling | TanStack Form |
| Authentication | better-auth, Custom AuthContext |
| Styling | Tailwind CSS v4, Lucide React Icons |
| Testing | Vitest, Testing Library |
Sources: package.json:10-75, src/app/layout.tsx:43-52, README.md:1-5
Development Workflow
To set up the local development environment, the following commands are utilized via pnpm:
# Install dependencies
pnpm i
# Run development server with Turbopack
pnpm dev
# Build for production
pnpm build
# Run unit tests
pnpm test
The development server defaults to port 3019.
Sources: package.json:5-12, README.md:7-17
Global Layout & Providers
The application's root layout initializes essential providers that wrap the entire component tree. This includes theme management, authentication state, and UI feedback systems like tooltips and toasts.
The layout also handles initial user session hydration by parsing user_profile and user_id cookies to populate the AuthProvider.
Sources: src/app/layout.tsx:43-98
Theme & Content Configuration
DXKB supports dynamic content and theming based on the deployment target (e.g., standard DXKB vs. BV-BRC). This is managed via a mapping system that adjusts site names, descriptions, and funding statements.
Content Mapping Logic
The system uses themeBases to determine which content folder to load.
| Theme Base | Content Folder | Welcome Title |
|---|---|---|
dxkb | dxkb | Welcome to the Disease X Knowledge Base |
bvbrc | bvbrc | Welcome to the Bacterial and Viral Bioinformatics Resource Center |
zinc/orange | generic | Welcome to the XKnowledge Base |
Sources: src/styles/theme-content.ts:13-70
Authentication & User Onboarding
The platform utilizes a centralized authentication system. Users can sign in using DXKB or BV-BRC credentials, as the resources are being merged.
Sign-In Process
The sign-in page uses zod for schema validation and TanStack Form for submission. It requires a username (or email) and a password of at least 8 characters.
Navbar Integration
The DesktopNavbar dynamically adjusts its display based on the isAuthenticated state from the useAuth hook. When signed in, it displays a user avatar with a dropdown for:
- User Profile
- My Workspace (linked via
wsUsername) - My Jobs
- Account Settings
- Sign Out button
Sources: src/components/navbars/desktop-navbar.tsx:220-272
Summary
DXKB is an enterprise-grade bioinformatics platform utilizing the Next.js App Router. Its setup involves a robust provider-based architecture, multi-tenant theme support, and a unified authentication system shared with BV-BRC. Developers can initialize the environment using standard pnpm workflows and customize the platform behavior through the theme-content mapping system.