A comprehensive web application for guitar players featuring chord visualization, scale learning, and fretboard mastery tools. Built with Next.js and React.
- Interactive chord diagram viewer
- Searchable chord library (Standard & Extended chords)
- Customizable chord positions and fingerings
- Modal view for enlarged chord diagrams
- Responsive design for all devices
- Visual representation of guitar scales
- Interactive scale pattern display
- Major scale patterns built-in
- Clean, intuitive interface
- Gradient background design for better visibility
- Interactive fretboard note recognition game
- Practice mode for learning note positions
- Clean card-based interface
- Progress tracking capabilities
- Framework: Next.js
- UI Library: React
- Styling: Tailwind CSS
- Components: shadcn/ui
- State Management: Custom React Hooks
- Clone the repository:
git clone https://github.com/RezixDev/guitar-tab
- Install dependencies:
npm install
- Run the development server:
npm run dev
- Open http://localhost:3000 to view the application
components/
├── chords/
│ ├── ChordSearch.tsx
│ ├── ChordList.tsx
│ ├── ChordDetails.tsx
│ ├── ChordModal.tsx
│ ├── ChordSVG.tsx
│ └── useChordState.ts
├── fretboard/
│ └── FretboardGame.tsx
└── ScaleViewer.tsx
app/
├── page.tsx
├── fretboard/
│ └── page.tsx
└── utils/
└── noteUtils.ts
ChordSearch
: Searchable interface for finding chordsChordList
: Displays available chords in categoriesChordDetails
: Shows detailed chord informationChordModal
: Popup view for enlarged chord diagramsChordSVG
: SVG renderer for chord diagrams
- Interactive scale visualization
- Support for various scale patterns
- Visual fretboard representation
- Interactive note recognition
- Practice mode
- Progress tracking
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
- Built with Next.js
- UI components from shadcn/ui
- Styled with Tailwind CSS