- 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.
/
โโโ 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
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 โ๏ธ
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.