A full-stack electric guitar learning platform with a Markdown knowledge base, interactive fretboard, D3 knowledge graph, and GitHub-style practice heatmap.
Project Overview
A personal guitar learning platform and practice tracker. The Markdown-based knowledge base covers technique articles, music theory, and chord/scale references. A D3-powered knowledge graph visualizes relationships between topics. The interactive fretboard lets users explore scale and chord fingerings. A GitHub-style heatmap tracks daily practice sessions per article. The backend (Node.js + Express + MongoDB) auto-scans the Markdown directory to generate a table of contents and backlink suggestions.
Technical Challenges & Solutions
Knowledge Graph Generation
Manually maintaining a graph of relationships between guitar topics is tedious and error-prone.
Solution: Built a backend parser that scans all Markdown files for WikiLink ([[Article Name]]) and standard Markdown links, then builds a directed graph of article relationships. The frontend renders this graph with react-force-graph-2d using D3 force simulation for interactive exploration.
Interactive Fretboard Rendering
Displaying note positions across a guitar fretboard with hover previews requires mapping musical theory to a precise 2D grid layout.
Solution: Modeled the 24-fret × 6-string fretboard as a 2D array, calculated note names from chromatic intervals per string tuning, and rendered clickable SVG cells with note-name tooltips on hover. Scale/chord highlighting overlays a filtered note set on the full grid.
Practice Progress Tracking
Users want to see which articles they have practiced and how consistently, similar to GitHub's contribution heatmap.
Solution: On each article read/practice event, the frontend POSTs a completion record to the backend, which stores it in MongoDB with a timestamp. The heatmap aggregates daily counts and feeds them to react-activity-calendar for a visual calendar view.
Learnings
This project was a rewarding exploration of unconventional UI components: integrating react-force-graph-2d for a D3 knowledge graph taught me about force simulation and graph data modeling. Building the backlink parsing system (WikiLink + standard Markdown links) gave me experience with AST traversal and static site generator patterns.