Vue JS 2 & Firebase Complete Course
Create "real world" React JS applications connected to Firestore (Firebase). Redux, authentication + real time features!
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!!
Javascript and ES6 knowledge is required!
Base Html and CSS is required
Section overview
FREE PREVIEWProject 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
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
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
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
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
Section overview
DB rules
Exchange rules
Profile rules
Opportunity rules
Deployment part 1
Deployment part 2
Final testing
Course ountro
Filip Jerga
Every video contains discussion where you can create a post describing an issue. Instructor responds usually within 1 business day.
Within 30 days from the purchase you can ask for a full refund. No questions asked. Your happiness is our priority.
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.