99
Lectures
17
Hours
Watch Intro Video

WHAT IS VUE JS?

Vue JS is a very popular JavaScript front-end framework that was designed specifically to help you write Web apps faster and more easily than ever before!

Used by companies such as 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 own 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 realtime 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 in to practice straight away, so we’ve build this course around one really great project (which will look fantastic in your career portfolio!):


In this course we are going to build application called Exchangario. Main purpose of this application is to exchange services and products.

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


First section will be not only about Vue JS . To make our application dynamic and up to the standards we need database. 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 first section you will start learning about firebase authentication. I will show you how to login and register with firebase. After user will be logged in we will display our application with couple of modifications only authenticated user can see.


As I said main idea of this application is to exchange products. For this we will implement page where user can create exchanges either of service or product type. We will create many inputs of different types .I will show you how you can perform form validation with popular Vuelidate package. After exchange will be created it will be displayed on Home page and offered to other users.


In later section we will be creating functionality to trade exchanges between the users. Every logged in user can apply for exchange by offering owned exchange as counter-offer. Submitted exchange has to have similar or same value as exchange we are applying for in order to be accepted by system. Once exchange is submitted opportunity is created. Opportunities are submitted exchanges which users can accept or decline. After opportunity is accepted user will receive contact informations on user with whom they can exchange the product.


In fifth section we will work on pagination and search feature.

In last section I will be talking about security rules for Firestore and finally we will deploy are application on Heroku so you can share it with your friends and family.


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

So what are you waiting for? Enrol now!!

Requirements

  • Javascript and ES6 knowledge is required!

  • Base Html and CSS is required

Course Curriculum

  • 1

    Introduction

  • 2

    Vue Basics

    • Section overview

      FREE PREVIEW
    • Project initialization

    • Vue folders

    • Adding styling and layout

    • Separation to components

    • Vue data

    • Vue props

    • Vue methods and click event

    • Additional Resource

    • Display exchanges and iterate data

    • Font awesome

    • Router introduction

    • Create new pages

    • Navigation fixes

    • Router links

    • Vuex integration

    • Vuex explanation

    • Vuex modules

    • Firebase setup

    • Get data from Firestore

  • 3

    Authentication

    • Section overview

    • Login and register pages

    • More inputs and two way data binding

    • Firebase signup

    • Enable register with email and password

    • Handle result of registration

    • Create user profile

    • Check if user is authenticated

    • Handle login process

    • Handle logout process

    • Create profile page

    • 32 2 Protected pages

    • User update modal

    • Store user profile

    • Copying by reference

    • Submit modal to update user profile

    • Update profile changes and view

  • 4

    Exchange Feature

    • Section overview

    • Create exchange page

    • Handle submission of exchange create

    • Prepare vuelidate

    • Basic validations

    • Custom validators

    • Register form validation

    • Handle tags input

    • Create exchange success

    • Exchange detail page

    • Exchange layout and fetch exchange

    • Fetch user in exchange detail page

    • Reset data before fetch exchange

    • Reusable modal

    • Exchange deal modal

    • Create inputs in modal

    • Firebase

    • Add exchange to profile

    • Create exchange on user

    • Display offered exchanges

    • Exchange modal realtime changes

    • Handle corner cases in modal

  • 5

    Opportunity Feature

    • Section overview

    • Create opportunity object

    • Add opportunity to firestore

    • Firebase function to add opportunity

    • Fetch opportunities

    • Get all data from opportunity

    • Fetch send opportunities

    • Display opportunities

    • Display send opportunities

    • Opportunity deal modal

    • Close modal and increase credit

    • Accept and decline opportunity

    • Update opportunity on user

    • Update send opportunity

    • Update credit in real time

    • Opportunity accept modal

    • Fetch user informations when modal opens

    • Testing opportunities

  • 6

    Pagination, Search & More

    • Section overview

    • Starting pagination

    • Fetch more data

    • Navigate to previous page

    • Keep track of current page

    • Search input improvements

    • Handle search

    • Filter exchanges

    • Logout fixes

    • Burger menu

    • Dropdown menu

  • 7

    Firebase Rules + Deployment

    • Section overview

    • DB rules

    • Exchange rules

    • Profile rules

    • Opportunity rules

    • Deployment part 1

    • Deployment part 2

    • Final testing

    • Course ountro

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 discussion where you can create a post describing an issue. Instructor responds usually within 1 business day.

  • What to do when I am unhappy with the course ?

    Within 30 days from the purchase you can ask for a full refund. No questions asked. Your happiness is our priority.

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

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