SPOTIFAKE App

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.

• 🚩 Instalation
• 🤖 Main technologies applied
• 🗝️ Key dev features

🚩 Instalation

1. Clone the repository in a folder and install it and its dependencies

yarn

or

npm install

2. Create an env file 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

3. Follow the steps in Spotify's Developers Documentation to obtain your Web API credentials and replace them in the env file above.
4. Run the app with yarn dev or npm run dev

🤖 Main technologies applied

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 🐶

🗝️ Key dev features

Some of the features the app accomplishes and DevEx worth to mention:

• Infinite scrolling implementation in the category results view using @vueuse/core's useInfiniteScroll
• 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-loader and some custom component
• Auto-import of components with unplugin-vue-components
• Enforcing commit standard with husky and @commitlint
• Ensuring all unit tests pass before pushing any git branch with husky and a pre-push git hook.