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.
/
āāā cypress/
ā āāā e2e tests...
āāā scripts/
ā āāā data/
ā ā āāā guitar.json
ā ā āāā schema.json
ā āāā indexTypesense.ts # script that index data from guitar.json into typesense server
āāā src/
āāā components/
ā āāā UI components...
āāā lib/
ā āāā reactChords.ts # draw guitar chord svg
ā āāā typesense.ts # typesense-instantsearch-adapter config
āāā routes/
āāā +page.svelte # guitar chords search
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/typesense/showcase-guitar-chords-search-svelte-kit.git
cd showcase-guitar-chords-search-svelte-kit
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:5173/ to see the app āļø
Set env variables to point the app to the Typesense Cluster
PUBLIC_TYPESENSE_SEARCH_ONLY_API_KEY=xxx
PUBLIC_TYPESENSE_HOST=xxx.typesense.net
PUBLIC_TYPESENSE_PORT=443
PUBLIC_TYPESENSE_PROTOCOL=https
To deploy your app, you may need to install an adapter for your target environment.