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

Other versions

NuxtJS | NextJS | Angular 15 | Vanilla JS | Astro | SolidJS | Remix | Sveltekit | Qwik | React Native

Tech Stack

• Typesense
• SolidJS
• Typescript
• 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

/
├── 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/
    │   └── createInstantsearch.tsx # run instantsearch.js on mount
    ├── utils/
    │   ├── reactChord.ts # draw guitar chord svg
    │   └── typesense.ts # typesense-instantsearch-adapter config
    └── App.tsx # guitar chords search

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/typesense/showcase-guitar-chords-search-solid-js.git

cd showcase-guitar-chords-search-solid-js

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 ✌️

Deployment

Set env variables to point the app to the Typesense Cluster

VITE_TYPESENSE_SEARCH_ONLY_API_KEY=xxx
VITE_TYPESENSE_HOST=xxx.typesense.net
VITE_TYPESENSE_PORT=443
VITE_TYPESENSE_PROTOCOL=https