https://github.com/solygambas/vue-projects
4 small Vue projects using Firebase.
https://github.com/solygambas/vue-projects
firebase firebase-auth firebase-authentication firebase-firestore firebase-hosting firebase-storage firestore javascript vue vue-router vuejs
Last synced: about 2 months ago
JSON representation
4 small Vue projects using Firebase.
- Host: GitHub
- URL: https://github.com/solygambas/vue-projects
- Owner: solygambas
- Created: 2021-05-16T07:58:19.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2022-05-01T05:18:17.000Z (about 4 years ago)
- Last Synced: 2025-04-07T22:15:44.815Z (about 1 year ago)
- Topics: firebase, firebase-auth, firebase-authentication, firebase-firestore, firebase-hosting, firebase-storage, firestore, javascript, vue, vue-router, vuejs
- Language: Vue
- Homepage: https://vue-muso-ninjas.web.app/
- Size: 812 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue Projects
4 small Vue projects using Firebase.
| # | Project | Description |
| --- | -------------------------------------- | -------------------------------------------------------------------- |
| 01 | [**Project Planner**](#projectplanner) | A simple project tracker to understand Vue basics. |
| 02 | [**Dojo Blog**](#dojoblog) | A blog to learn the Composition API, using Vue Router and Firestore. |
| 03 | [**Live Chat**](#livechat) | A real-time chatroom working with Firebase Authentication. |
| 04 | [**Muso Ninjas**](#musoninjas) | A music playlist website using Firebase Storage. |
A simple project tracker to understand Vue basics.
[See 01-project-planner folder](01-project-planner)
### Features
- setting up a project with Vue CLI.
- using the Options API.
- adding, updating, completing and deleting projects.
- creating a filter nav and showing filtered projects.
- displaying Material Icons.
A blog to learn the Composition API, using Vue Router and Firestore.
[See 02-dojo-blog folder](02-dojo-blog)
### Features
- discovering the Composition API and the setup function.
- using props, refs and computed values.
- using watch, watchEffect and lifecycle hooks.
- creating reusable composition functions (composables).
- fetching data with async/await and making a POST request.
- creating a loading spinner and a tag cloud.
- using useRouter and useRoute from Vue Router.
- connecting to a Firebase project.
- fetching a collection of posts and single posts.
- adding and deleting blog posts.
- using timestamps and ordering posts.
- understanding real-time listeners in Firestore.
A real-time chatroom working with Firebase Authentication.
[See 03-live-chat folder](03-live-chat)
### Demo
[See Demo deployed on Firebase](https://vue-projects-54fbf.web.app/)
(Email: demo@demo.com - Password: demouser)
### Features
- setting up Firebase Authentication.
- handling signup and login forms with composables.
- managing context, errors and emitting events.
- getting the current user and logging users out.
- adding route guards.
- waiting for Firebase Authentication to initialize.
- adding new messages to Firestore.
- using a real-time Firestore listener to handle messages.
- unsubscribing from real-time listeners to avoid unnecessary re-renders.
- formatting dates in the chat window with date-fns.
- building and deploying the app with Firebase CLI.
- adding Firestore security rules to require authentication and locking the API to its domain.
A music playlist website using Firebase Storage.
[See 04-muso-ninjas folder](04-muso-ninjas)
### Demo
[See Demo deployed on Firebase](https://vue-muso-ninjas.web.app/)
(Email: demo@demo.com - Password: demouser)
### Features
- creating a Firebase project and reusing Firebase composables.
- handling signup and login forms with loading state.
- showing a different navbar for connected users and adding route guards.
- adding new playlists.
- uploading images to Firebase Storage.
- getting real-time playlist data and listing playlists.
- displaying playlists details and checking playlist ownership.
- deleting a playlist and removing images from Firebase Storage.
- adding songs to playlists and updating playlist details.
- listing and deleting songs.
- listing user playlists with Firestore queries.
- building and deploying the app with Firebase CLI.
- adding Firebase Storage security rules to require authentication and locking the API to its domain.
Based on [Build Web Apps with Vue JS 3 & Firebase](https://www.udemy.com/course/build-web-apps-with-vuejs-firebase/) by Shaun Pelling - The Net Ninja (2020).