Skip to content

Shadester/stringthing

Repository files navigation

🎸 StringThing

Your Complete Guitar & Bass Toolkit

Tuning, setup, diagnostics, and maintenance — all in one place

React TypeScript Vite License

Live DemoReport BugRequest Feature


📖 About

StringThing is a comprehensive web toolkit for guitar and bass players, providing everything you need for tuning, setup, diagnostics, and maintenance. From chromatic tuning to truss rod adjustments, StringThing offers professional-grade tools accessible right in your browser. Whether you're a beginner learning your first restring or a seasoned player dialing in your setup, StringThing has you covered.

Why StringThing?

  • 🎯 Accurate Tuning — Real-time pitch detection with dual display modes (Standard & Strobe)
  • 🎸 Unified Experience — Global guitar/bass selector affects all tools across the app
  • 📚 Guided Process — Step-by-step instructions prevent mistakes
  • 🧮 Smart Tools — Calculate string slack, diagnose issues, and optimize setup
  • 🔧 Setup Guides — Professional-quality adjustment instructions
  • 🎨 Beautiful UI — Modern, vibrant design with consistent styling throughout
  • 📱 Works Everywhere — Responsive design for desktop, tablet, and mobile

✨ Features

🎵 Chromatic Tuner

Click to expand
  • Advanced pitch detection using autocorrelation algorithm with high-pass filtering
  • Real-time frequency analysis at 48kHz sample rate for accuracy
  • Automatic string detection — highlights which string you're playing
  • Visual tuning indicator with ±50 cents range
  • Shows note name, octave, frequency, and cents deviation
  • Color-coded feedback: 🟢 In tune • 🔴 Flat • 🟠 Sharp
  • Low-frequency noise filtering to ignore footsteps, HVAC, and ambient noise

Supported Tunings:

  • 🎸 Guitar — Standard, Drop D, Half Step Down, Whole Step Down, DADGAD, Open G
  • 🎸 Bass 4-string — Standard, Drop D, Half Step Down
  • 🎸 Bass 5-string — Standard, Half Step Down

📋 Interactive Restring Guide

Click to expand
  • Step-by-step instructions tailored for guitar and bass
  • Interactive checklist — mark steps complete as you go
  • Progress bar to track your workflow
  • Expert tips for each step to avoid common pitfalls
  • Special instructions for Floyd Rose and floating tremolo systems

Features:

  • Clean the fretboard reminder
  • Proper string threading technique
  • Correct winding direction guidance
  • String stretching best practices

🧮 String Slack Calculator

Click to expand

Calculate the perfect amount of string slack for optimal winding tension.

Supports:

  • Multiple tuner types (Standard, Vintage, Locking)
  • Common scale length presets:
    • 🎸 Guitar: Fender (25.5"), Gibson (24.75"), PRS (25")
    • 🎸 Bass: Standard (34"), Short (30"), Medium (32"), Long (35")
  • Custom scale length input
  • Automatic calculations for all strings
  • Results in centimeters for easy measurement

Calculates:

  • Nut-to-tuner distance for each string
  • Required slack per string
  • Number of wraps needed

🎸 String Gauge Recommender

Click to expand

Get personalized string gauge recommendations based on your playing style and tuning.

Features:

  • Recommendations for guitar and bass
  • Multiple tuning support (Standard, Drop D, Drop C, Drop B, etc.)
  • Playing style selection (Light touch, Medium, Heavy/Aggressive)
  • Comprehensive gauge set database
  • Detailed descriptions of each gauge set
  • Tips for gauge selection and setup adjustments

🔧 Fret Buzz Diagnostic

Click to expand

Interactive troubleshooting tool to identify and fix fret buzz issues.

Diagnostic Features:

  • Location-based analysis (low frets, middle, high, specific, or all over)
  • Severity assessment (slight, moderate, severe)
  • Detailed cause identification
  • Step-by-step solutions
  • Quick pre-diagnostic checks
  • Safety warnings and professional guidance

📏 Action & Intonation Guide

Click to expand

Professional setup instructions for adjusting string height and intonation.

Action Adjustment:

  • Recommended heights for guitar and bass
  • Measurement techniques
  • Step-by-step adjustment process
  • Troubleshooting common issues
  • Tools needed checklist

Intonation Setup:

  • What intonation is and why it matters
  • How to check intonation at the 12th fret
  • Saddle adjustment instructions ("Sharp = Saddle Back, Flat = Forward")
  • Final verification steps
  • Troubleshooting guide

🔩 Truss Rod Adjustment Guide

Click to expand

Safe and effective neck relief measurement and adjustment tool.

Features:

  • Visual relief diagrams showing correct bow, excessive bow, and back bow
  • Interactive measurement input with real-time analysis
  • Quick reference buttons (Business Card, Thin Pick, Medium Pick)
  • Automatic diagnosis based on relief measurement
  • Direction-specific adjustment instructions (clockwise vs. counterclockwise)
  • Symptom descriptions for each relief type
  • Comprehensive safety warnings
  • DO/DON'T checklist
  • Truss rod location guide
  • When to see a professional

⚠️ Safety First: Includes prominent warnings about potential damage from improper adjustments.


🚀 Quick Start

Prerequisites

  • Node.js 18+ and npm

Installation

# Clone the repository
git clone https://github.com/Shadester/stringthing.git
cd stringthing

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:5173 in your browser.

Build for Production

# Create optimized production build
npm run build

# Preview production build locally
npm run preview

🛠️ Tech Stack

Technology Purpose
React 19 Modern UI library with latest features
TypeScript Type-safe development
Vite Lightning-fast build tool and dev server
Web Audio API Real-time pitch detection & tone synthesis
CSS3 Modern styling with gradients and animations

🎨 Design Philosophy

StringThing features a bold and vibrant design system with a unified, consistent UI:

  • 🌈 Gradient backgrounds — Dynamic cyan-to-teal color schemes
  • 💎 Glass-morphism effects — Frosted glass UI elements with backdrop blur
  • Glow effects — Subtle shadows and lighting for depth
  • 🎭 Smooth animations — Polished transitions and hover states
  • 🌙 Dark theme — Optimized for extended use and focus
  • 🎯 Design System — Standardized components (segmented buttons, form containers, action buttons) for visual consistency
  • 🎨 CSS Variables — Centralized color system for easy theming

📱 Browser Compatibility

StringThing works in all modern browsers that support:

  • ✅ Web Audio API (pitch detection & synthesis)
  • ✅ MediaDevices API (microphone access)
  • ✅ CSS Grid & Flexbox
  • ✅ ES2022+ JavaScript features

Recommended: Chrome, Firefox, Safari, Edge (latest versions)


🤝 Contributing

Contributions are welcome! Feel free to:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.


🙏 Acknowledgments

  • Pitch detection algorithm based on autocorrelation method
  • Synthesized string sounds use additive synthesis with harmonics
  • Built with modern React patterns and hooks

Made with ❤️ for musicians

⬆ Back to Top

About

Guitar & bass restringing assistant with tuner, step-by-step guide, and string calculator

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages