https://github.com/typesense/showcase-guitar-chords-search-qwik

A demo that shows how to implement Typesense in a Qwik app
https://github.com/typesense/showcase-guitar-chords-search-qwik

qwik typesense

Last synced: 7 months ago
JSON representation

A demo that shows how to implement Typesense in a Qwik app

• Host: GitHub
• URL: https://github.com/typesense/showcase-guitar-chords-search-qwik
• Owner: typesense
• License: apache-2.0
• Created: 2024-02-05T17:28:53.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2025-02-10T19:56:37.000Z (9 months ago)
• Last Synced: 2025-04-17T07:17:32.584Z (7 months ago)
• Topics: qwik, typesense
• Language: TypeScript
• Homepage: https://guitar-chords-search-qwik.typesense.org
• Size: 1.91 MB
• Stars: 2
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


 🎸 Instant Guitar Chord Positions Search, powered by Typesense - Qwik





  
Other versions

  NuxtJS SSR |

  NextJS |

  Angular 15 |

  Vanilla JS |

  Astro |

  SolidJS |

  Remix |

  Sveltekit |

  Qwik |

  React Native



## Tech Stack

- Typesense

- Qwik

- Typescript

- [typesense-instantsearch-adapter](https://github.com/typesense/typesense-instantsearch-adapter) & instantsearch.js

- 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.

## Project Structure

```bash

/

├── 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...

    ├── hooks/

    │   └── useInstantsearch.ts # run instantsearch.js after render

    ├── routes/

    │   └── index.tsx # guitar chords search

    └── utils/

        ├── reactChords.ts # draw guitar chord svg

        └── typesense.ts # typesense-instantsearch-adapter config

```

## Development

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

Installation

```shell

git clone https://github.com/typesense/showcase-guitar-chords-search-qwik.git

cd showcase-guitar-chords-search-qwik

npm i

```

Start typesense server

```shell

npm run start:typesense # or: docker compose up

```

Index data into typesense

```shell

npm run index:typesense

```

Start the dev web app

```shell

npm run dev

```

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

## Deployment

Set env variables to point the app to the Typesense Cluster

```env

PUBLIC_TYPESENSE_SEARCH_ONLY_API_KEY=xxx

PUBLIC_TYPESENSE_HOST=xxx.typesense.net

PUBLIC_TYPESENSE_PORT=443

PUBLIC_TYPESENSE_PROTOCOL=https

```