Music WebApp with Vuejs3, Pinia, and Firebase 9

Feel free to clone this project especially for frontend programmers who like or want to learn and deepen about vuejs3 and pinia state management.

✨Features

• CRUD data with Firebase 9 and Pinia
• Authenticate and Authorization
• Infinity scroll
• Example unit test with Vitest
• Example e2e with Cypress
• PWA with Vite
• Much inline comment for help who read this project
• Internationalization translate words and format currency with Vue-i18n
• Form validation with Vee-validate
• State management with Pinia
and more...

🚀 Demo

https://music-vpinia-p7dkderyd-fridolinf.vercel.app/

Project Screenshots:

🛠️ Installation Steps:

1. clone project

https://github.com/fridolinf/music-vpinia-app.git

2. install package

npm install

3. environtment configuration

remove .example from .env.example and insert your key

4. setup firebase firestore database

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read: if true;
      allow write: if request.auth.uid == resource.data.uid;
      allow create: if request.auth != null;
      allow delete: if request.auth.uid == resource.data.uid;
    }
  }
}

5. setup firebase storage

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
    	allow read: if true;
      allow write: if request.auth != null && 
      		     request.resource.contentType == "audio/mpeg" && 
                     request.resource.size < 10 * 1024 * 1024;
  		allow delete: if request.auth != null;
    }
  }
}

6. run local

npm run dev

💻 Built with

Technologies used in the project:

• Vuejs3
• Pinia
• Firebase 9
• Cypress
• Vite
• Vitest
• Vue-i18n
• Tailwindcss