🌳 KBTree (Knowledge Base Tree)

KBTree is a modular, lightweight Knowledge Base application built with Vanilla JavaScript (ES6 Modules), HTML5, and CSS3. It features a cascading column navigation system (Process -> Domain -> Technology) that allows users to seamlessly drill down to find standard operating procedures, FAQs, KCS articles, and technical documentation.

✨ Features

• Cascading Navigation: Filter dynamically through Process, Domain, and Technology columns.
• Search & Filter: Keyword search by title, ID, or technology, alongside category-based filtering (How To, FAQ, KCS Article, What Is).
• Focus & Search Modes: Dynamic layout adjustments to minimize distractions while reading or searching.
• Live Article Editing: Edit titles and field content seamlessly with live saving back to the database.
• Source Code Export: Easily view and copy the raw HTML code of an article with a beautifully highlighted syntax modal.
• Zero-Build Frontend: Uses pure ES6 modules—no Webpack, no Babel, just clean, modern web standards.

🚀 Prerequisites

To run this project, you will need Node.js and npm installed on your machine. This is required to run the local mock database.

🛠️ Installation & Setup

1. Clone the repository:

   git clone https://github.com/j86schroeder/kbtree.git
   cd kbtree

2. Install dependencies: To ensure the backend server package is installed, run:

   npm install

🗄️ Starting the Backend (Database)

This project relies on json-server to mock a REST API using the local JSON file. The frontend connects to http://localhost:3000 to fetch and save articles.

To start the database, run the following command in your terminal from the root directory:

npx json-server data/kb_data.json --port 3000

Note: If prompted with Need to install the following packages: json-server... Ok to proceed? (y), type y and press Enter.

You should see output indicating the server has started successfully:

JSON Server started on PORT :3000

🌐 Starting the Frontend

Because this project uses ES6 Modules (<script type="module">), you cannot simply double-click index.html to open it in a browser (this will cause CORS errors). You must serve the files through a local web server.

Option A: Using VS Code

1. Install the Live Server extension.
2. Right-click index.html and select "Open with Live Server".

Option B: Using npx Open a second terminal window (keep the json-server running in the first one) and run:

npx serve .

Then navigate to the localhost URL provided in the terminal.

📁 Project Structure

kbtree/
├── data/
│   └── kb_data.json       # Mock database containing articles & taxonomy
├── js/
│   ├── api.js             # Handles REST API calls (fetch/put)
│   ├── app.js             # Main application entry point
│   ├── browser.js         # Renders the cascading list columns
│   ├── config.js          # App state and API configurations
│   ├── editor.js          # Handles article editing mode
│   ├── modal.js           # Generates the source code copy modal
│   ├── templates.js       # HTML templates and SVG icon mappings
│   ├── ui.js              # Aggregates UI modules
│   ├── utils.js           # Helper functions
│   └── viewer.js          # Renders article content pane
├── css/
│   ├── modules/           # Modular CSS files (base, layout, browser, editor, etc.)
│   └── style.css          # Main stylesheet importing all modules
├── index.html             # The main application view
└── package.json           # Node project dependencies

📝 License

MIT