Getting Started
Relevant source files
The following files were used as context for generating this wiki page:
This document provides a technical overview for developers looking to get started with the CyberPath project. It covers local setup, project structure, core technologies, and contribution guidelines. The project's mission is to empower individuals and organizations in their cybersecurity journey by providing accessible resources, tools, and a comprehensive database of certifications and training programs.
The primary features include a public database of cybersecurity resources and the ability for the community to contribute new information. While the official website is the recommended way to use CyberPath, this guide focuses on setting up a local development environment.
Sources: README.md:3-25
Technology Stack
The project is built with Astro and integrates several other technologies for UI, development, and tooling.
Sources: package.json, astro.config.ts
Core Technologies
| Technology | Description |
|---|---|
| Astro | The core web framework for building the site. |
| React | Used for interactive UI components within Astro pages. |
| Tailwind CSS | A utility-first CSS framework for styling. |
| TypeScript | For static typing throughout the codebase. |
| Fuse.js | A powerful, lightweight fuzzy-search library used for searching certifications. |
| Puppeteer | Used in a build script to take screenshots of the application. |
| Sentry | Integrated for error monitoring in development environments. |
Sources: package.json:9-31, astro.config.ts:13-26, scripts/screenshot.js:5-8
Astro Integrations
The astro.config.ts file defines the key integrations used in the project. The following diagram illustrates these integrations.
This diagram shows the main integrations configured in astro.config.ts.
Sources: astro.config.ts:14-26
Local Development Setup
To run the platform locally, you must clone the repository and install the dependencies using pnpm.
Sources: README.md:33-53
Installation and Execution Flow
The following diagram outlines the steps to get the development server running.
Sources: README.md:38-53, package.json:5
Commands
- Clone the repository:
git clone https://github.com/ebalo55/cyberpath.git - Navigate into the directory:
cd cyberpath - Install dependencies (pnpm is required):
pnpm install - Run the development server:
pnpm run dev
The application will be accessible at http://localhost:4321.
Sources: README.md:38-53
NPM Scripts
The package.json file defines several scripts for development and building.
| Script | Description |
|---|---|
dev | Starts the Astro development server. |
start | An alias for the dev script. |
build | Runs astro check, builds the project, disables the dev toolbar, installs Chrome via Puppeteer, and runs the screenshot.js script. |
preview | Starts a local server to preview the production build. |
astro | Provides direct access to the Astro CLI. |
Sources: package.json:4-8, scripts/screenshot.js:3-8
Project Structure
The repository is organized into several key directories.
src/: Contains the main source code.components/: Contains reusable Astro and React components, such asReactiveDatatable.content/: Home to Astro's content collections. Thecertificationscollection is defined here with a specific schema.lib/: Contains shared libraries and data definitions, likecareer-paths.ts.pages/: Contains Astro pages and API route handlers (e.g.,data.json.ts).
scripts/: Contains auxiliary scripts, such asscreenshot.jsfor generating a screenshot during the build process.astro.config.ts: The main configuration file for the Astro framework.tailwind.config.ts: Configuration for Tailwind CSS.package.json: Defines project metadata, dependencies, and scripts.
Sources: astro.config.ts, tailwind.config.ts, package.json, src/content.config.ts, scripts/screenshot.js
Core Data Structures
Career Paths
The application defines a set of predefined cybersecurity career paths. This data is managed in src/lib/career-paths.ts.
CareerPathsList: A constant array of strings listing all available career path names.CareerPathsData: An object that maps each career path name to its description, an associated image, and image attribution.
Sources: src/lib/career-paths.ts:15-103
The available career paths are:
| Career Path | Description |
|---|---|
| Blue Team Specialist | Defends an organization’s networks and systems against cyberattacks. |
| Cloud Security Specialist | Designs and implements security measures for cloud-based infrastructure. |
| Cybersecurity Manager | Leads and manages cybersecurity teams and strategies. |
| Malware Developer | Develops and tests exploits to identify vulnerabilities. |
| OSINT Specialist | Gathers and analyzes publicly available information to identify threats. |
| Penetration Tester | Conducts authorized simulated cyberattacks to find vulnerabilities. |
| Red Team Specialist | Performs offensive security testing to simulate advanced cyberattacks. |
| Risk Management Specialist | Identifies, assesses, and prioritizes potential security risks. |
| Security Operations Specialist | Manages the daily operations of an organization’s security infrastructure. |
| Threat Hunter | Actively searches for hidden and advanced threats within an environment. |
Sources: src/lib/career-paths.ts:40-103
Certifications Content Collection
Certifications are managed as a content collection within Astro. The schema is defined in src/content.config.ts and includes fields like title, acronym, career_paths, price, and reference.
Sources: src/content.config.ts:6-21
Data Fetching and Rendering
The main database view is powered by the ReactiveDatatable React component, which provides a dynamic, searchable, and paginated table of certifications.
Data Loading Sequence
The component fetches data from two API endpoints upon loading:
/database/data.json: Contains the full metadata for all certifications./database/data-index.json: Contains a pre-computed Fuse.js index for fast client-side searching.
The following diagram illustrates this data fetching flow.
This sequence shows how the ReactiveDatatable component efficiently loads data and a search index to provide a responsive user experience.
Sources: src/components/astro/database/reactive-datatable.tsx:162-205
Contributing
Contributions are welcome. The process follows a standard GitHub workflow.
Contribution Workflow
This flowchart outlines the steps for contributing code to the CyberPath project.
Sources: CONTRIBUTING.md:6-23