A crazy-fast netlified vue3-firebase app!
This repository contains the source code for the remastered Vue.js 3 Masterclass course on 05/2022 by Mike (michaelwybraniec@me.com)
The Vue.js Masterclass is so comprehensive that we can not cover everything on this page. Thus we’ve created a separate page where you can learn more about it.
The goal was to master skills along with Best Practices, Modern Javascript, and other exciting technologies, by building a Real World application - a forum.
- Vue cli, router, and State management with Vuex
- Modern Javascript (ES6/7/8)
- User permissions & Route Guards
- Third party authentication
- Google Cloud Firestore
- Automatic code review with ESLint
- Consuming REST API
- Application architecture and best practices
- Higher Order Functions
- Creating Vue Plugins
- Code Splitting
- Support for older Browsers
- Webpack configuration
- SEO and pre-rendering
- Deployments
-
Firebase: https://firebase.google.com/docs/firestore/security/rules-structure https://firebase.google.com/docs/firestore/security/rules-conditions
-
Namespacing: https://vuex.vuejs.org/guide/modules.html#namespacing https://vuejs.org/guide/reusability/custom-directives.html
-
More about transition groups: https://vuejs.org/guide/built-ins/transition-group.html
-
Portrait_Placeholder.png: https://commons.wikimedia.org/wiki/File:Portrait_Placeholder.png
-
Stunning free images & royalty free stock: https://pixabay.com/ https://pixabay.com/api/docs/
-
Form Validation for Vue.js: https://vee-validate.logaretm.com/v4/
-
Bunch of validation rules out of the box: https://vee-validate.logaretm.com/v2/guide/rules.html#after
-
A tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js: https://v3.vue-final-modal.org/
-
Modern tools and services into a single, simple workflow for building high performance sites and apps: https://www.netlify.com/
-
Uses webpack-bundle-analyzer to create an interactive treemap visualization of the contents of all your bundles: https://www.npmjs.com/package/vue-cli-plugin-webpack-bundle-analyzer
-
Name our chunk or select different modes: https://webpack.js.org/api/module-methods/#magic-comments
-
Vue-cli plugin to visualize size of webpack output files: https://www.npmjs.com/package/vue-cli-plugin-webpack-bundle-analyzer
-
Get higher rankings by serving crawlers a static HTML version of your Javascript website, without compromising your customers’ experience: https://prerender.io/
-
Check any website's social share previews while you browse: https://chrome.google.com/webstore/detail/social-share-preview/ggnikicjfklimmffbkhknndafpdlabib
yarn install
yarn serve
yarn build
yarn lint