Vue 3 music search app consuming free Spotify API. It retrieves results for Artists, Albums and Tracks categories.
It also displays detailed info for each individual item.
note: It DOES NOT have a music player nor PLAYS any song however.
- Clone the repository in a folder and install it and its dependencies
yarn
or
npm install
- Create an
envfile in the project's root folder. Add the following variables:
VITE_SPOTIFY_CLIENT_ID=[your_spotify_client_id]
VITE_SPOTIFY_CLIENT_SECRET=[your_spotify_client_secret]
VITE_SPOTIFY_AUTH_URL=https://accounts.spotify.com/api/token
VITE_SPOTIFY_BASE_API_URL=https://api.spotify.com/v1
- Follow the steps in Spotify's Developers Documentation to obtain your Web API credentials and replace them in the
envfile above. - Run the app with
yarn devornpm run dev
This project has been developed using:
- Vue 3 with Composition API and using
script setup - TypeScript
- Vue router for routing 🧭
- Pinia 🍍 as store solution
- vue-i18n for translations 🈸
- vite-svg-loader for SVG import ✨
- axios as the HTTP client 🛜
- PostCss and Tailwind for styling 🎨
- vueUse for some utility functions and composables 🔩
- Vite as build tool 🏗️
- Vitest and @testing-library/vue for unit testing 🧪
- Husky to trigger actions on Git Hooks 🐶
Some of the features the app accomplishes and DevEx worth to mention:
- Infinite scrolling implementation in the category results view using
@vueuse/core'suseInfiniteScroll - Usage of async components with
<Suspense> - Dark/Light theming with tailwind and
@vueuse/core - Language selection and storage of these settings using
localStorage - Implemented skeletons as placeholder while async components load/ fetch data
- Dynamically injecting SVG inline with
vite-svg-loaderand some custom component - Auto-import of components with
unplugin-vue-components - Enforcing commit standard with
huskyand@commitlint - Ensuring all unit tests pass before pushing any git branch with
huskyand apre-pushgit hook.