https://github.com/burnycoder/skill-tree
https://github.com/burnycoder/skill-tree
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/burnycoder/skill-tree
- Owner: BurnyCoder
- Created: 2025-03-01T23:04:41.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-01T23:58:43.000Z (over 1 year ago)
- Last Synced: 2025-03-02T00:22:54.637Z (over 1 year ago)
- Language: TypeScript
- Size: 293 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Skill Tree Manager
An interactive web application for managing hierarchical skill trees that allows users to track their skills and progress in a visual, tree-like structure.
## Features
- **Hierarchical Skill Trees**: Build nested skill trees with skills containing sub-skills multiple levels deep
- **Interactive Interface**: Add, edit, and delete skills through an intuitive GUI
- **Progress Tracking**: Track progress with status markers (To Do, In Progress, Completed)
- **Quick Status Update**: Change task status with a single click using the status buttons
- **Visual Status Indicators**: Different colors indicate the status of each skill
- **Local Storage**: Your skill tree data is saved locally in your browser
## Getting Started
### Prerequisites
- Node.js 18.0.0 or later
- npm or yarn
### Installation
1. Clone the repository:
```
git clone https://github.com/yourusername/skill-tree-manager.git
cd skill-tree-manager
```
2. Install dependencies:
```
npm install
# or
yarn install
```
3. Start the development server:
```
npm run dev
# or
yarn dev
```
4. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.
## Usage
1. **Add a Skill**: Click the "Add New Skill" button to create a root-level skill
2. **Add a Sub-skill**: Click the "+" button on any skill to add a child skill
3. **Edit a Skill**: Click the edit (pencil) icon to modify a skill's details
4. **Delete a Skill**: Click the delete (trash) icon to remove a skill and all its children
5. **Expand/Collapse**: Click on a skill or its chevron icon to expand or collapse its children
6. **Change Status**:
- Click directly on the status buttons (◯, 🕒, ✓) to quickly change status
- Or edit a skill to update its status from the form
## Technologies Used
- [Next.js](https://nextjs.org/) - React framework
- [TypeScript](https://www.typescriptlang.org/) - Type-safe JavaScript
- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework
- [UUID](https://github.com/uuidjs/uuid) - For generating unique IDs
- [Lucide React](https://lucide.dev/) - Icon library
## License
This project is licensed under the MIT License - see the LICENSE file for details.
## Acknowledgements
- Built with [Next.js](https://nextjs.org/)
- Icons by [Lucide React](https://lucide.dev/)