Brochure
Enquire
- What is Vue?
- New Features in Vue 3
- What You Should Already Know
- Environment Setup
- Course Files
Build Web Apps with Vue JS 3 & Firebase
Quick Facts
| particular | details | |||
|---|---|---|---|---|
|
Medium of instructions
English
|
Mode of learning
Self study
|
Mode of Delivery
Video and Text Based
|
Course overview
Build Web Apps with Vue JS 3 & Firebase certification course is created by Shaun Pelling - Owner of Net Ninja & Coding Tutor and is offered by Udemy which is aimed toward the applicants who want to start their journey of building full-stack applications with Vue 3 and Firebase. Build Web Apps with Vue JS 3 & Firebase online training program by Udemy will take students from beginners to experts in Vue.JS, beginning with the fundamentals and progressing to fully-functional Vue applications.
Applicants who intend to enroll in the Build Web Apps with Vue JS 3 & Firebase online classes should have a basic understanding of HTML, CSS, ES6, and Javascript to ensure a seamless learning experience. This course also covers how to store and recover data from a NoSQL database, as well as how to authenticate users with the Firebase Auth service. The course also provides a hands-on practical understanding by assisting applicants in creating several projects from scratch, such as a reaction timer, a blog, a chatroom, a project tracker, and a music playlist website.
The highlights
- Certificate of completion
- Self-paced course
- English videos with multi-language subtitles
- 31.5 hours of pre-recorded video content
- 1 downloadable resource
- 30-day money-back guarantee
- Unlimited access
- Accessible on mobile devices and TV
Program offerings
- Certificate of completion
- Self-paced course
- English videos with multi-language subtitles
- 31.5 hours of pre-recorded video content
- 1 downloadable resource
- Unlimited access
- Accessible on mobile devices and tv
Course and certificate fees
Fees information
₹ 3,099
certificate availability
Yes
certificate providing authority
Udemy
Who it is for
What you will learn
After completing the Build Web Apps with Vue JS 3 & Firebase online certification, applicants will receive a deep insight into the fundamentals and methodologies for creating applications using Vue JS 3 and Firebase. Applicants will explore the abilities of Vue CLI as well as Firebase cloud functions and the Firebase database. Applicants will learn about numerous data operations such as data binding and data fetching, as well as the fundamentals of the composition API. Applicants will also learn about security precautions and rules for securing the firebase.
The syllabus
Introduction & Setup
Vue Basics
- How to use Vue (using the CDN)
- Creating a Vue App
- Templates & Data
- Methods & Click Events
- Conditional Rendering
- Other Mouse Events
- Outputting Lists (v-for)
- Attribute Binding
- Dynamic Classes
- CHALLENGE - Add to Favs
- SOLUTION - Add to Favs
- Computed Properties
The Vue CLI (for Bigger Projects)
- Why Use the Vue CLI?
- How to Use the Vue CLI
- New Project Walkthrough
- Vue Files & Templates
- Template Refs
- Multiple Components
- Component Styles & Global Styles
- Passing Data with Props
- Emitting Custom Events
- Click Event Modifiers
- Slots
- CHALLENGE - Reusing Components
- Using Teleport
Project Build - Reaction Timer
- Project 1 Preview & Setup
- Starting a New Game
- Component Lifecycle Hooks
- Creating the Reaction Timer
- Emitting Custom Events with Data
- CHALLENGE - Showing a Results Component
- Finishing Touches
Forms & Data Binding
- Forms Intro & Setup
- Two-way Data Binding
- Select Fields
- Checkboxes
- Keyboard Events & Modifiers
- CHALLENGE - Deleting Skills
- Submitting the Form
Vue Router Basics
- Why Use the Vue Router?
- Router Setup for New Projects
- Router Links
- Folder Structure
- Route Parameters
- Dynamic Links
- 404 Pages & Redirects
- Programmatic Navigation
- Lazy Loading Components
Fetching Data
- Using JSON Server
- Where to Fetch Data
- Conditionally Showing Data
Project Build - Simple Project Planner
- Project 2 Preview & Setup
- Home View & Data
- Single Project Template
- Using Material Icons
- Deleting Projects
- Completing Projects
- New Project Form
- Adding New Projects
- Navbar Component
- Edit Project Route
- CHALLENGE - Updating Projects
- Creating a Filter Nav
- CHALLENGE - Showing Filtered Projects
The Composition API
- Drawbacks of the Options API
- Composition API Basics
- Template Refs in the Setup Function
- Using Refs for Reactivity
- Refs vs Reactive
- Computed Values in the Setup Function
- Using watch and watchEffect
- Using Props in the Setup Function
- Lifecycle Hooks
Async Code (& the Composition API)
- Fetching Data in the Setup Function
- Reusable Composition Functions (Composables)
- Creating Another Composable
- Creating a Loading Spinner
- Making a Web Form
- CHALLENGE - Making a POST Request
- Future Async Lesson & Extra Styling
Routing (with the Composition API)
- Routing Recap & Navbar
- Using useRouter
- Using useRoute
- CHALLENGE - Creating a Tag Route
- Creating a Tag Cloud
Firebase Databases (Firestore)
- Creating a Firebase Project
- Connecting to a Firebase Project
- Firestore Collections & Documents
- Fetching a Collection of Documents
- Fetching Single Documents
- Adding Documents
- Deleting Docments
- Using Timestamps
- Ordering Collections
- Intro to Real-Time Listeners
Project Build - Live Chat Room with Authentication
- Project 3 Preview & Setup
- Firebase Setup (& Reusing Firebase Projects)
- Creating a Signup & Login Form
- CHALLENGE - Switching Between Forms
- Firebase Authentication Setup
- Creating a Signup Composable
- Outputting Errors
- Creating a Login Composable
- Setup Context & Emitting Events
- Navbar Component
- Logging Users Out (Composable)
- Getting the Current User (Composable)
- Route Guards (for Unauth Users)
- Waiting for Firebase Auth to Initialize
- CHALLENGE - Watching the Current User
- New Chat Form
- Adding New Messages to Firestore
- Real-Time Firestore Listener (Composable)
- Creating the Chat Window
- Formatting Dates (date-fns)
- CHALLENGE - Auto-Scrolling the Chat Window
- Unsubscribing From Real-Time Listeners
- Final Route Guard
- Testing & Next Steps
Building & Deploying (Firebase Hosting)
- The Firebase CLI
- Building an App
- Deploying the App
- Making Changes & Re-deploying
Firebase Security Rules
- What Are Security Rules?
- Paths & Rules Explained
- Requiring Authentication
- Locking the API to a Domain
Project Build - Muso Ninjas (& Firebase Storage)
- Project 4 Preview & Setup
- Global Styles & Custom Font
- Creating a Firebase Project
- Connecting to Firebase
- Reusing Firebase Composables
- Creating a Login View
- Adding a 'pending' State to Requests
- Creating a Signup View
- Adding a Navbar Component
- CHALLENGE - Logging Users Out
- CHALLENGE - Conditionally Showing Links
- New Playlist Component
- Handling File Changes
- Intro to Firebase Storage
- Uploading Images (part 1)
- Uploading Images (part 2)
- Adding New Playlists
- CHALLENGE - Getting Real-Time Playlist Data
- Listing Playlists
- Nav Update & Route Guards
- Playlist Details Route
- Redirecting to Playlist Details
- Getting Single Documents (Real-time)
- Playlist Details Template
- Checking Playlist Ownership
- CHALLENGE - Deleting a Playlist (Composable)
- Deleting Images from Storage
- More on Firestore Rules
- Storage Rules
- Adding Songs to Playlists
- Updating Playlist Details
- Listing Songs
- CHALLENGE - Deleting Songs
- User Playlists Route
- Firestore Queries
- Listing User Playlists
- Final Touches
- Building & Deploying
- Next Steps
Using Vue with Firebase 9
- Intro & Starter Project
- Firebase Config File
- Fetching Firestore Data
- Real Time Collection Data
- Adding New Documents
- Deleting Documents
- Updating Documents
- Setting up Firebase Auth
- Signing Up New Users
- Logging Users Out
- Logging Users In
- Getting the Current User
- Conditional Navbar Content
- Waiting for Auth to be Ready
- Making a Route Guard
- Redirecting Users
- Firestore Queries
Extra Lessons & More Resources
- Extra JavaScript Lessons
- ES6 Modules (Import & Export)
- Using map( ) & filter( )
- Spread Syntax
- Template Strings
- Arrow Function Syntax
- Fetch & Promises
- Async & Await
Archived - Introduction
- Introduction
- Course Files
- Text Editor Setup
Archived - Vue.js Basics
- What is Vue.js?
- Setting up Vue.js (the simple way)
- The Vue Instance
- Methods
- Data Binding
- Events
- The Event Object
- Keyboard Events
- Two-way Data Binding (v-model)
- Modifiers
- Conditional Output with v-if
- Looping with v-for
Archived - The Vue CLI
- The Vue CLI
- Components & Vue Files
- The data() Function
- Nesting Components
- Scoped CSS
- Passing Data with Props
- Custom Events
- Life-cycle Hooks
- Making Requests with Axios
- Filters
- Computed Properties (custom search box)
Archived - The Vue Router
- What is the Vue Router?
- Setting up Routes
- Router Links
- Route Parameters
- Watching the $route Object
- More on Router Links
- Programmatically Redirecting Users
- Hash vs History Mode
- Styling Active Links
Archived - Project One - Ninja Smoothies
- Project Preview & Setup
- Project Structure
- Material Design
- Navbar Component
- Index Component
- Deleting (local) Data
- Introduction to Firebase
- Setting up Firestore
- Installing Firebase
- Retrieving Firestore Data
- Deleting Firestore Data
- Add Smoothie Component
- Adding Ingredients
- Outputting Ingredients
- Saving Records to Firestore
- Deleting Ingredients
- Edit Smoothie Route
- Firestore Queries
- Edit Smoothie Form
- Updating Firestore Records
- Deploying to Firebase
- Project Review
Archived - Project Two - Real-Time Chat App
- Project Overview & Setup
- Project Structure
- Firestore Setup
- Making a Welcome Screen
- Passing Props Via Routes
- Route Guards
- Creating the Chat Window
- New Message Component
- Adding Messages to Firestore
- Real-Time Events (event listeners)
- Formatting Times with Moment
- Auto-scrolling
- Deploying the App
- Project Review
Archived - Project Three - Geo Ninjas
- Project Overview & Setup
- Project Structure
- Setting up Firebase
- Navbar Component
- Map Component
- Google Maps API
- Creating a New Map
- Creating a Signup Page
- Firebase Auth & Data Structure
- Checking if an Alias exists
- Signing up a User
- Creating Firestore User Records
- Wrapping the Vue Instance
- Logging a User Out
- Login Component
- Logging Users In
- Geolocation API
- Updating a User’s Location
- Route Guarding (auth)
- Conditional Navbar Links
- Ninja (map) Markers
- User Profiles
- User Comments (data discussion)
- Adding Comments
- Showing Comments (Real-Time)
- Some Final Styles
- Deploying the app
Archived - Firebase Cloud Functions
- What Are Cloud Functions?
- Creating a Simple Callable Function
- Calling a Function
- Intro to Firebase Rules
Archived - ES6 & Extras
- ES6 Arrow Functions
- ES6 Promises
- Imports and Exports
- JavaScript Filter Method
Archived - BONUS: Vue CLI 3
- Vue CLI 3 Introduction
- Using the new Vue CLI
- The CLI Service
- Custom Presets
- Adding Plugins
- Build & Deploy to Firebase
- Instant Prototyping
- Build Targets (Making a Web Component)
- Using Web Components
- The Vue GUI (part 1)
- The Vue GUI (part 2)
- Using 'vue init' with the New CLI
Instructors
Mr Shaun Pelling
Instructor
Freelancer
Articles
Popular Articles
prev
next
Latest Articles
prev
next
