Technology Stack

Relevant source files

The following files were used as context for generating this wiki page:

• package.json
• astro.config.ts
• tailwind.config.ts
• tsconfig.json
• src/content.config.ts
• src/components/astro/database/reactive-datatable.tsx
• scripts/screenshot.js
• src/pages/career-paths/[path]/data.json.ts

The CyberPath project is a modern web application designed to provide a comprehensive, public database of cybersecurity certifications and training resources. The technology stack is centered around the Astro framework, leveraging its content-driven and island architecture capabilities. It integrates React for interactive UI components, Tailwind CSS for styling, and TypeScript for type safety across the entire codebase.

This document provides a detailed breakdown of the core frameworks, libraries, configurations, and tools that constitute the CyberPath application. The architecture is designed for performance, maintainability, and a seamless developer experience, combining static site generation with client-side reactivity where needed.

Core Framework: Astro

Astro is the foundational web framework for CyberPath. It is used to build the static site, handle routing, manage content, and integrate various UI frameworks and tools.

Sources: astro.config.ts, package.json

Astro Configuration

The main configuration is located in astro.config.ts. It defines the site's URL and orchestrates all integrations.

// astro.config.ts
export default defineConfig({
    site:         "https://cyberpath-hq.com",
    integrations: [
        tailwind({
            nesting: true,
        }),
        sentry({
            enabled: import.meta.env.DEV,
        }),
        spotlightjs(),
        react(),
        sitemap(),
        mdx({
            extendMarkdownConfig: true,
            gfm:                  true,
        }),
    ],
    build:        {
        assets: "assets",
    },
});

Sources: astro.config.ts:11-31

Integrations

The project leverages several key Astro integrations to extend its functionality:

Integration	Purpose	Source File
@astrojs/tailwind	Integrates Tailwind CSS for utility-first styling.	astro.config.ts:13-15
@sentry/astro	Provides error monitoring and reporting during development.	astro.config.ts:16-18
@spotlightjs/astro	Adds Spotlight.js for in-browser debugging.	astro.config.ts:19
@astrojs/react	Enables the use of React components within Astro pages.	astro.config.ts:20
@astrojs/sitemap	Automatically generates a sitemap-index.xml file.	astro.config.ts:21
@astrojs/mdx	Allows the use of MDX for content files, combining Markdown with JSX.	astro.config.ts:22-25

Sources: astro.config.ts:12-26, package.json:12-23

Frontend Development

The frontend is built using a combination of Astro components, React components for interactivity, and Tailwind CSS for styling.

UI Framework: React

React is used for creating dynamic and interactive UI components, such as the reactive data table for certifications. The @astrojs/react integration enables "island architecture," where interactive React components are hydrated on the client-side while the rest of the page remains static HTML.

Key React components include:

• ReactiveDatatable: A client-side component that fetches, searches, and paginates certification data.
• Button, Table, Pagination: Reusable UI components for building the user interface.

Sources: package.json:14, src/components/astro/database/reactive-datatable.tsx, src/components/react/button.tsx, src/components/react/table.tsx, src/components/react/pagination.tsx

Styling: Tailwind CSS

Tailwind CSS is used for all styling, providing a utility-first approach. The configuration in tailwind.config.ts extends the default theme with custom fonts and animations.

• Font: The Nunito Variable font is set as the primary sans-serif font.
• Animations: A custom bounce-horizontal keyframe animation is defined.
• Plugins: It uses @tailwindcss/forms, @tailwindcss/typography, and @tailwindcss/aspect-ratio for enhanced styling capabilities.

// tailwind.config.ts
export default {
    content:  [ "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}" ],
    darkMode: "class",
    theme:    {
        extend: {
            fontFamily: {
                sans: [
                    "Nunito Variable",
                    ...defaultTheme.fontFamily.sans,
                ],
            },
            animation:  {
                "bounce-horizontal": `bounce-horizontal 2s infinite`,
            },
            // ... keyframes
        },
    },
    plugins:  [
        forms,
        typography,
        aspectRatio,
    ],
} as Config;

Sources: tailwind.config.ts:8-35

Data Management and Backend

Data for certifications is managed through Astro's content collections, and served via dynamically generated JSON API routes.

Content Collections

The project defines a certifications collection to manage certification data stored in Markdown/MDX files. The schema for this collection is defined in src/content.config.ts using Zod, ensuring type safety for all content entries.

The diagram below shows the schema for the certifications collection.

Data Fetching and Search

The ReactiveDatatable component is responsible for displaying certification data. It fetches data from two JSON endpoints and uses Fuse.js for client-side fuzzy searching.

The data fetching flow is as follows:

1. The ReactiveDatatable component mounts on the client.
2. It makes parallel fetch requests to /database/data.json (for all certification metadata) and /database/data-index.json (for the pre-built Fuse.js search index).
3. Once the data and index are loaded, Fuse.js is initialized.
4. User input in the search bar triggers a client-side search, and the displayed data is updated reactively.

This flow is visualized in the sequence diagram below.

Search Library: Fuse.js

Fuse.js is used for implementing a fast, client-side fuzzy search on the certification data. A pre-computed search index is generated at build time and served via a JSON API route (/database/data-index.json.ts) to optimize performance. This avoids the need to build the index on the client at runtime.

Sources: package.json:20, src/components/astro/database/reactive-datatable.tsx:196-202, src/pages/database/data-index.json.ts:9-15

Tooling and Build Process

The project relies on TypeScript for static typing and pnpm as the package manager. The build process includes steps for type checking, building the Astro site, and generating a screenshot of the database page.

TypeScript Configuration

TypeScript is used throughout the project for type safety. The configuration in tsconfig.json extends Astro's strict preset and defines path aliases for easier module imports.

// tsconfig.json
{
    "extends": "astro/tsconfigs/strict",
    "compilerOptions": {
        "baseUrl": ".",
        "verbatimModuleSyntax": true,
        "paths": {
            "@components/*": [ "src/components/*" ],
            "@layouts/*": [ "src/layouts/*" ],
            "@assets/*": [ "src/assets/*" ]
        },
        "jsxImportSource": "react"
    },
    "include": [".astro/types.d.ts", "**/*"],
    "exclude": ["dist"]
}

Sources: tsconfig.json

Build Script

The build script defined in package.json orchestrates the entire production build process.

// package.json
"scripts": {
  "build": "astro check && astro build && astro preferences disable devToolbar && npx puppeteer browsers install chrome && node ./scripts/screenshot.js",
}

Sources: package.json:7-7

The build process involves several steps, as illustrated in the following diagram:

This diagram shows the sequence of commands executed by the build script, including the detailed steps within the screenshot.js script which uses Puppeteer and Sharp.

Sources: package.json:7, scripts/screenshot.js

Key Dependencies

The following tables summarize the main production and development dependencies.

Production Dependencies

Package	Version	Description
astro	^5.8.0	The core web framework.
@astrojs/react	^4.3.0	React integration for Astro.
@astrojs/tailwind	^6.0.2	Tailwind CSS integration for Astro.
react	^18.3.1	A JavaScript library for building user interfaces.
fuse.js	^7.1.0	Lightweight fuzzy-search library.
tailwindcss	^3.4.17	A utility-first CSS framework.
typescript	^5.8.3	A typed superset of JavaScript.

Sources: package.json:11-26

Development Dependencies

Package	Version	Description
puppeteer	^23.11.1	A Node.js library for controlling a headless Chrome browser. Used for screenshots.
sharp	^0.33.5	High-performance Node.js image processing library. Used to optimize screenshots.
@types/react	^18.3.23	TypeScript definitions for React.

Sources: package.json:28-34

Summary

The technology stack of CyberPath is a well-integrated system built on Astro, designed for performance and developer productivity. It combines the benefits of static site generation with the power of React for interactive UIs. Data is managed through type-safe content collections and served via efficient API routes, while a robust build process ensures code quality and automates asset generation. This modern stack provides a solid foundation for building and scaling the CyberPath platform.