Full Stack2026

Guitar Learning Website

A full-stack electric guitar learning platform with a Markdown knowledge base, interactive fretboard, D3 knowledge graph, and GitHub-style practice heatmap.

Live Demo

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.

Tech Stack

Frontend Framework

React 19TypeScriptViteTailwindCSS

Visualization

react-force-graph-2d (D3)react-activity-calendarRecharts

Backend

Node.jsExpressTypeScript

Database

MongoDBMongoose

Deployment

Docker ComposeNginx