https://github.com/typesense/showcase-guitar-chords-search-nuxt-js
A demo that shows how to implement Typesense in a Nuxt.js app
https://github.com/typesense/showcase-guitar-chords-search-nuxt-js
instantsearch nuxt nuxtjs typesense typesense-instantsearch-adapter typesense-showcase vue vue-instantsearch
Last synced: about 1 month ago
JSON representation
A demo that shows how to implement Typesense in a Nuxt.js app
- Host: GitHub
- URL: https://github.com/typesense/showcase-guitar-chords-search-nuxt-js
- Owner: typesense
- License: apache-2.0
- Created: 2024-01-15T22:50:44.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-21T15:44:25.000Z (4 months ago)
- Last Synced: 2025-04-17T07:17:32.735Z (about 1 month ago)
- Topics: instantsearch, nuxt, nuxtjs, typesense, typesense-instantsearch-adapter, typesense-showcase, vue, vue-instantsearch
- Language: Vue
- Homepage: https://guitar-chords-search-nuxt-js.typesense.org
- Size: 411 KB
- Stars: 16
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
🎸 Instant Guitar Chord Positions Search, powered by Typesense - Nuxt3 SSR
Other versions
NuxtJS |
NextJS |
Angular 15 |
Vanilla JS |
Astro |
SolidJS |
Remix |
Sveltekit |
Qwik |
React Native
## Tech Stack
- Typesense
- Nuxt 3 with vue-instantsearch server-side rendering (SSR)
- 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
```bash
/
├── scripts/
│ ├── data/
│ │ ├── guitar.json
│ │ └── schema.json
│ └── indexTypesense.ts # script that index data from guitar.json into typesense server
├── components/
│ └── UI components...
├── plugins/
│ └── vue-instantsearch.ts # vue-instantsearch setup
├── utils/
│ └── typesense.ts # typesense-instantsearch-adapter config
├── app.vue # guitar chords search
└── nuxt.config.ts # typesense-instantsearch-adapter build configure
```
## Development
To run this project locally, make sure you have docker and nodejs, install the dependencies and start the dev server:
Installation
```shell
git clone https://github.com/typesense/showcase-guitar-chords-search-nuxt-js.git
cd showcase-guitar-chords-search-nuxt-js
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:3000 to see the app ✌️
## Deployment
- Set env variables required in [`env.example`](./.env.example) to point the app to the Typesense Cluster