Project File & Directory Structure

Relevant source files

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

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

The CyberPath project is built using the Astro framework, with React for interactive UI components and Tailwind CSS for styling. The file structure is primarily organized around Astro's conventions, which emphasize content-driven websites and a clear separation between static content, server-side logic, and client-side interactive components. This structure facilitates the project's goal of providing a comprehensive, searchable database of cybersecurity certifications.

The core of the project lies in the src/ directory, which contains all source code, including pages, components, content collections, and utility libraries. Configuration files at the root level define the project's build process, dependencies, and framework integrations. The structure is designed to be modular, allowing for easy updates to certification data and the addition of new features.

High-Level Directory Overview

The following diagram illustrates the main directories and key files within the project, showing how they are organized.

Root Directory

The root directory contains configuration files that control the project's behavior, dependencies, and build process.

File	Description
package.json	Defines project metadata, dependencies (e.g., astro, react, fuse.js), and npm scripts for development, building, and other tasks.
astro.config.ts	The main Astro configuration file. It sets up integrations like Tailwind, React, MDX, Sentry, and Sitemap generation. It also specifies the build output directory for assets.
tailwind.config.ts	Configures Tailwind CSS, including theme extensions (fonts, animations) and plugins.
tsconfig.json	TypeScript configuration file. It defines compiler options and path aliases (e.g., @components, @assets) for cleaner imports.
CONTRIBUTING.md	Provides guidelines for developers who wish to contribute to the project.
LICENSE.md	Contains the project's software license, which restricts commercial use and redistribution.

Sources: package.json, astro.config.ts, tailwind.config.ts, tsconfig.json, CONTRIBUTING.md, LICENSE.md

Scripts

The scripts/ directory holds custom scripts for automating tasks.

• scripts/screenshot.js: A Node.js script that uses Puppeteer to launch a headless browser, navigate to the application's database page, and take a screenshot. This is executed as part of the build process defined in package.json to generate a preview image.

Sources: scripts/screenshot.js, package.json:5:102-181

src Directory

This is the primary directory containing the application's source code.

src/content

Astro's Content Collections are used to manage the certification data. All certification information is stored as Markdown (.md/.mdx) files within src/content/certifications/.

src/content.config.ts

This file defines the schema for the certifications collection using Zod. It ensures that every certification markdown file has a consistent set of frontmatter fields.

The schema for a certification is defined as follows:

Field	Type	Required	Description
title	string	Yes	The full title of the certification.
acronym	string	Yes	The acronym for the certification.
last_updated_at	date	Yes	The date the certification information was last updated.
image	image()	Yes	An optimized image for the certification.
reference	string	Yes	A URL to the official certification page.
aliases	string[]	No	Alternative names or acronyms.
draft	boolean	No	If true, the certification is not included in the build. Defaults to false.
career_paths	enum(CareerPathsList)	Yes	An array of associated career paths.
price	string	Yes	The price of the certification.
currency	string	Yes	The currency of the price (e.g., "USD").

Sources: src/content.config.ts:4-22

src/pages

This directory implements Astro's file-based routing. Each file or directory corresponds to a route in the application. It includes standard pages, dynamic routes, and API endpoints.

API Endpoints (.ts files)

The project serves certification data via JSON API endpoints. These are TypeScript files that export a GET function.

• src/pages/database/data-index.json.ts: Generates and serves a pre-computed Fuse.js index for all certifications. This allows for fast client-side searching.
• src/pages/career-paths/[path]/data.json.ts: A dynamic API route that returns a JSON array of certifications filtered by a specific career path (e.g., /career-paths/penetration-tester/data.json).
• src/pages/career-paths/[path]/data-index.json.ts: Similar to the above, but generates a Fuse.js index for a specific career path.
• src/pages/robots.txt.ts: Dynamically generates the robots.txt file for search engine crawlers.

Sources: src/pages/database/data-index.json.ts, src/pages/career-paths/[path]/data.json.ts, src/pages/career-paths/[path]/data-index.json.ts, src/pages/robots.txt.ts

src/components

This directory contains reusable UI components, separated into Astro and React components.

• src/components/react/: Contains client-side interactive components built with React, marked with "use client". Examples include button.tsx, table.tsx, and pagination.tsx. These are general-purpose components that form the application's design system.
• src/components/astro/: Contains components written in Astro's .astro syntax or React components specifically tailored for an Astro page.
  • reactive-datatable.tsx: A key React component responsible for rendering the main certification database. It fetches data and the Fuse.js index from the API endpoints, manages state for pagination and search queries, and displays the results in a table.

The following diagram shows the data flow for the reactive datatable component.

Sources: src/components/astro/database/reactive-datatable.tsx:173-221

src/lib

This directory contains shared library code, constants, and utility functions used across the application.

• src/lib/career-paths.ts: Defines and exports the master list of all available cybersecurity career paths (CareerPathsList) and their associated metadata like descriptions and images (CareerPathsData). This data is used to populate career path pages and validate the career_paths field in the certification content schema.

Sources: src/lib/career-paths.ts

src/types

This directory is for custom TypeScript type definitions.

• src/types/certification-metadata.ts: Defines the CertificationMetadata interface, which provides a strong type for the certification objects used throughout the application, from the content layer to the frontend components.

Sources: src/types/certification-metadata.ts

Conclusion

The CyberPath project's structure is a well-organized system leveraging the strengths of Astro for content management and performance, with React for rich interactivity. The file-based routing, content collections, and API endpoints create a clear and maintainable architecture. The separation of concerns—content in src/content, UI in src/components, and routing/data-serving in src/pages—makes the codebase easy to navigate and extend. This structure is robust and scalable, perfectly supporting the project's mission to be a central resource for cybersecurity professionals.