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

Other versions

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

Tech Stack

• Typesense
• Angular 15
• Typescript
• 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

/
├── scripts/
│   ├── data/
│   │   ├── guitar.json
│   │   └── schema.json
│   └── indexTypesense.ts # script that index data from guitar.json into typesense server
├── src/
│   └── app/
│       ├── UI components...
│       └── app.component.ts # guitar chords search
└── writeEnvVariables.ts # util script to write env variables at build time

Development

To run this project locally, make sure you have docker and nodejs.

Installation

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

cd showcase-guitar-chords-search-angular

npm i

Start typesense server

npm run start:typesense # or: docker compose up

Index data into typesense

npm run index:typesense

Generate angular env variables

ng generate environments

Then add this to your src/environments/environment.development.ts

// change them if you want to use Typesense cloud
export const environment = {
  PUBLIC_TYPESENSE_SEARCH_ONLY_API_KEY: null,
  PUBLIC_TYPESENSE_HOST: null,
  PUBLIC_TYPESENSE_PORT: "443",
  PUBLIC_TYPESENSE_PROTOCOL: "https",
};

Start the dev web app

ng serve

Open http://localhost:4200/ 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

The file writeEnvVariables.ts will automatically load them into src/environments for the angular app.