Feel free to clone this project especially for frontend programmers who like or want to learn and deepen about vuejs3 and pinia state management.
- 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...
https://music-vpinia-p7dkderyd-fridolinf.vercel.app/
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
Technologies used in the project:
- Vuejs3
- Pinia
- Firebase 9
- Cypress
- Vite
- Vitest
- Vue-i18n
- Tailwindcss