phihero/typesense-guitar-chords-nextjs

Instantly search, filter, group and view over 2000 guitar chord positions!

🎸 Instant Guitar Chord Positions Search, powered by Typesense

View it live here: typesense-guitar-chords.vercel.app

Tech Stack

• Typesense
• NextJS. There is also a Nuxt version
• Typescript
• Sass
• Vitest
• Cypress

All make for a blazingly fast search experience 🔥🔥🔥

The guitar chord dataset & chord svg generation is from tombatossals which contains 2141 chord shapes of 552 chords.

The web app is deployed on Vercel, powered by Typesense cluster running on Typesense Cloud.

Repo structure

• src/ contains UI components
• scripts/ contains file to index data from scripts/data into Typesense

Development

To run this project locally, make sure you have docker and nodejs, install the dependencies and run the local server:

Installation

git clone https://github.com/phiHero/typesense-guitar-chords-nextjs.git

cd typesense-guitar-chords-nextjs

npm i

Start typesense server

npm run start:typesense # or: docker compose up

Index data into typesense

npm run index:typesense

Start the dev web app

npm run dev

Open http://localhost:3000 to see the app ✌️