178
Lectures
20
Hours

WHAT IS VUE JS?

Vue JS is a trendy JavaScript front-end framework explicitly designed to help you write Web apps faster and more efficiently than ever!

Used by Nintendo, Adobe, GitLab, Baidu, and Alibaba, Vue JS is rapidly increasing in popularity, so it’s a great time to add it to your CV.

By the end of this course, you’ll have the skills and confidence you need to use Vue JS on your projects!

So, no matter whether you’re a complete beginner to Vue JS, or an experienced programmer keen to improve your skills, this course is for you!

WHAT IS FIREBASE?

Firebase provides a real-time database and backend as a service. The service provides application developers an API that allows application data to be synchronized across clients and stored on Firebase's cloud.

THE COURSE

Students learn best when they’re putting what they learn into practice straight away, so we’ve built this course around one great project (which will look fantastic in your career portfolio!):

In this course, we are going to build an application called Exchangario. The primary purpose of this application is to exchange services and products.

We will start with the basics of the Vue JS framework. We will initialize the first pages, create routing, and style them properly.

The first section will not only be about Vue JS. We need a database to make our application dynamic and up to the standards. The database we will use in this course is cloud Firestore from Firebase. In Firestore, we will keep our data of opportunities, exchanges, and user profiles stored as documents in collections. More about this in the course. 

After the first section, you will start learning about firebase authentication. I will show you how to log in and register with Firebase. After the user is logged in, we will display our application with modifications only authenticated users can see.

The main idea of this application is to exchange products. We will implement a page where users can create exchanges of service or product type. We will make many inputs of different types. After the exchange is completed, it will be displayed on the Home page and offered to other users. I will show you how to perform form validation with the popular Vuelidate package.

Later, we will be creating functionality to trade exchanges between the users. Opportunities are offered exchanges that users can accept or decline. Every logged-in user can apply for exchange by offering owned exchange as a counter-offer. The submitted exchange must have a similar or identical value as the exchange we are using to be accepted by the system. Once an exchange is proposed opportunity is created. After the opportunity is accepted user will receive contact information on the user with whom they can exchange the product.

In the later section, we will work on pagination and search features.

In the last section, I will be talking about security rules for Firestore, and finally, we will deploy our application on Heroku to share it with your friends and family.

With 20 hours of on-screen instruction, it doesn’t matter whether you’re planning to start your career as a developer or want to improve your programming skills. This is the right course for you.

Requirements

  • Basic JS knowledge.

Course curriculum

  • 1

    Introduction

  • 2

    Project Initialization

    • Dev Environment

    • Folder Structure

    • First template

    • Init styles

    • Navbar separation

    • Hero Section

    • List and Pagination
  • 3

    Data and Props

    • Vue Data

    • For Loop

    • Navbar Props

    • Exchange data

    • Display exchange data

    • Exchange Tags

    • Font Awesome

    • Start Icon
  • 4

    Router

    • Pages

    • Router

    • Page reusability

    • Adjust Navbar

    • router link

    • Page wrapper
  • 5

    Vue concepts

    • Vue JS concepts

    • Computed Properties

    • Use Ref
  • 6

    Vuex

    • Vuex introduction

    • Vuex state

    • Get exchanges with action

    • Mutations

    • Async Get exchanges

    • Vuex modules

    • Namespaced
  • 7

    Firebase introduction

    • Firebase

    • Specify data in Firestore

    • Get data from Firestore
  • 8

    Register

    • Login and Register Page

    • Data binding

    • Register form inputs

    • User module

    • Register user
  • 9

    Auth and Composition

    • Error and processing

    • Watchers

    • Map vuex state

    • Map State improvement

    • Composition

    • useAuth

    • More watchers

    • Cleanup

    • Toast Module
  • 10

    Handle Auth User

    • Create user Profile

    • on auth state change

    • Get user Profile

    • Merge user and profile

    • Register renaming

    • Getters

    • Get user in Composition

    • Display user email
  • 11

    Auth Improvements

    • Logout

    • Login

    • Navbar auth improvement

    • Authentication fix

    • Before each route

    • Redirect when authenticated

    • Redirect after login and register
  • 12

    Profile Page

    • Profile Page

    • Profile page auth check

    • Link to profile

    • Profile modal

    • Pass data to modal

    • More profile inputs

    • Update user Profile

    • Close Modal

    • Provide profile informations
  • 13

    Exchange Form + Validations

    • Exchange Create Page

    • Exchange form data

    • Vuelidate

    • Error messages

    • More validators

    • Generic errors

    • Custom messages

    • Form errors component

    • Custom validators
  • 14

    Create Exchange

    • Handle Tags

    • Display tags

    • Prevent duplicates

    • Clean form data and action

    • User Ref

    • Create exchange

    • Create new exchanges
  • 15

    Additional Validations

    • Register validation

    • Additional validators

    • Login validation
  • 16

    Exchange Detail Page

    • Exchange detail page

    • Provide Slug

    • Add slug to exchange

    • Get slug from params

    • Fetch exchange

    • Display rest of exchange

    • Exchange user
  • 17

    Modal

    • Reusable Modal

    • Update Profile Fix

    • Close Modal Fix

    • Custom slot

    • Ref to component
  • 18

    Exchange Deal Modal

    • Exchange deal modal

    • Exchange Modal Content

    • Modal values + selected input

    • Is price check

    • Fetch user exchanges

    • Display user exchanges

    • Selected Exchange

    • Offered Price

    • Percentage difference

    • Difference Text

    • isAllowedPrice

    • is Exchange Owner

    • Can create exchange

    • Additional UI
  • 19

    Opportunity

    • Prepare opportunity

    • Get all opportunity data

    • Opportunity module

    • Opportunity references

    • Opportunity refactor
  • 20

    Display Opportunities

    • Get received opportunities

    • Store opportunities to state

    • Extract data from opportunity

    • Display opportunity in UI

    • Add opportunity status

    • Fetch send opportunities

    • Selected opportunities option

    • Display sent opportunities

    • Styling improvements
  • 21

    Opportunity deal

    • Opportunity deal modal

    • Buttons to control opportunity

    • Dispatch accept and decline

    • Close Opportunity Modal

    • Modal Header

    • accept or decline deal

    • Change opportunity status

    • Opportunity result modal

    • Display user info in result
  • 22

    Control User Credit

    • Has not enough credit

    • Decrease credit

    • Accept Opportunity increase credit

    • Decline Opportunity Refund credit

    • Display date on exchange
  • 23

    Pagination

    • Pagination Start

    • Page click

    • Store initial pagination data

    • Moving forward in pagination

    • Disable pagination

    • Pagination Back

    • Display current page

    • Reset pagination
  • 24

    Search

    • Start search

    • Pass search with props

    • Filter exchanges is working

    • Dropdown Menu

    • Handle dropdown Close
  • 25

    Image Upload

    • Upload Start

    • Get array buffer

    • Upload Image Preparation

    • Upload Image Success

    • Upload Progress

    • Small Fixes
  • 26

    Rules

    • Rules Intro

    • Check user id rule

    • Function in rules

    • Exchange rules

    • Additional user rules

    • Opportunity Rules
  • 27

    Deployment

    • ENV File

    • Production Server

    • Heroku Setup

    • Setup Github

    • Heroku Deployment

    • Test App + Course End

Instructor(s)

Software Engineer

Filip Jerga

My name is Filip Jerga and I am an experienced software engineer and freelance developer. I have a Master's degree in Artificial Intelligence and several years of experience working on a wide range of technologies and projects from C++ development for ultrasound devices to modern mobile and web applications in React and Angular. Throughout my career, I have acquired advanced technical knowledge and the ability to explain programming topics clearly and in detail to a broad audience. I invite you to take my course, where I have put a lot of effort to explain web and software engineering concepts in a detailed, hands-on and understandable way.

FAQ

  • How to get help when I am stuck with the course?

    Every video contains a discussion where you can create a post describing an issue. The instructor usually responds within 1 business day.

  • What to do when I am unhappy with the course ?Within 30 days of the purchase, you can ask for a full refund. No questions asked. Your happiness is our priority.

    Address common questions ahead of time to save yourself an email.

  • Do I need to watch every lecture of such a really extensive course

    Of course not! Every lecture is committed (explained in the introduction section). You can start watching at any lecture. Just download the correct version of the project attached to lecture resources.