showcase-guitar-chords-search-svelte-kit Svelte Themes

Showcase Guitar Chords Search Svelte Kit

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

šŸŽø Instant Guitar Chord Positions Search, powered by Typesense - Sveltekit

Other versions

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

Tech Stack

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...
    ā”œā”€ā”€ lib/
    ā”‚   ā”œā”€ā”€ reactChords.ts # draw guitar chord svg
    ā”‚   ā””ā”€ā”€ typesense.ts # typesense-instantsearch-adapter config
    ā””ā”€ā”€ routes/
        ā””ā”€ā”€ +page.svelte # 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-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 āœŒļø

Deployment

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.

Top categories

Loading Svelte Themes