Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/typesense/showcase-guitar-chords-search-astro
A demo that shows how to implement Typesense within Astro
https://github.com/typesense/showcase-guitar-chords-search-astro
astro astrojs typesense
Last synced: 3 months ago
JSON representation
A demo that shows how to implement Typesense within Astro
- Host: GitHub
- URL: https://github.com/typesense/showcase-guitar-chords-search-astro
- Owner: typesense
- License: apache-2.0
- Created: 2024-02-05T17:27:02.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-05-28T20:39:44.000Z (8 months ago)
- Last Synced: 2024-05-29T11:33:01.598Z (8 months ago)
- Topics: astro, astrojs, typesense
- Language: Astro
- Homepage: https://guitar-chords-search-astro.typesense.org
- Size: 141 KB
- 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 - Astro 🚀
Other versions
NuxtJS |
NextJS |
Angular 15 |
Vanilla JS |
Astro |
SolidJS |
Remix |
Sveltekit |
Qwik |
React Native
## Tech Stack
- Typesense
- Astro
- Typescript
- Cypress
- [typesense-instantsearch-adapter](https://github.com/typesense/typesense-instantsearch-adapter) & instantsearch.js
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/
│ │ └── Heading.astro
│ ├── layouts/
│ │ └── Layout.astro
│ ├── pages/
│ │ └── index.astro # guitar chords search
│ ├── utils/
│ │ ├── reactChord.ts # draw guitar chord svg
│ │ └── typesense.ts # typesense-instantsearch-adapter config
│ └── styles/
│ └── ...
└── package.json
```
## 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-astro.git
cd showcase-guitar-chords-search-astro
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:4321 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
```