Build 7 Real World Applications with Vue.js

This video provides an overview of the entire course.

In this video, we will cover all the packages we need to get going with our project of developing a small music library to manage our collection of songs.

• Use Vue’s webpack bundle

• Install other additional packages that we need to use

• Import all our packages

In this video, we will set up the music collection and the first views to display all our songs.

• Create our first component and import the song list

• Add some styling to the song display

• Make the song list sortable by column and ascending and descending.

Having too many elements rendered at once slows down any application. Pagination is a helpful tool to remedy that.

• Check which parts of the application is too slow with Chrome’s DevTools

• Split off the table body to a separate component

• Paginate the list with an endless scroller

Every music library needs to have custom playlists as nobody knows how to organize music better than whoever listens to it.

• Create a new component for the playlist navigation

• Add functionality to create playlists and slugify the titles for easier navigation

• Persist new playlists to localStorage

We have playlists now but they’re still empty. So in this video we’ll add the functionality to add songs to playlists.

• Add events and props to facilitate communication between the components

• If the adding flag is active display a button to add songs to the playlists

• Restructure the existing components to properly display the songs from playlists

Any playlist should be properly manageable: renaming it, deleting it, and deleting songs from it.

• Add an additional column for extra functionality

• Add the ability to rename and delete playlists

• Make it possible to delete songs from playlists

Nothing is more important for browsing music than being able to quickly find that one song you want to have right now. A searchbar is the way to go.

• Include the web worker webpack plugin and create a basic web worker file

• Provide the worker with the selected playlist and search through the list

• Restructure the existing components to work with searched through song lists

In this video we will look at the requirements needed to set up the TV Show tracker.

• Initialize the project with “vueinitwebpack”

• Prepare the default structure for the new project

• Include all necessary modules

To make it easier to talk to the outside world we can add helper libraries for various external services.

• Set up a firebase account

• Add a helper file and set up firebase with the provided config

• Create a small helper library for Fetch

The most essential part of a TV show tracker is being able to search for shows. So a search bar we shall implement!

• Create a new component with a themed searchbar

• Include the helper library and get the search results from the TV Maze API

• Display the search result in our new component

We’ll need more than just a quick overview over found videos: detailed descriptions and all episodes of single shows.

• Create a new component and the necessary routes to it

• Call the API to get the detailed information for a single show

• Display the description and detailed show runtime results

Finally, the thing we’re actually here for: subscribing to TV shows to keep updated on their release schedule.

• Add a subscription link and flag to each show in the search result

• Create the new needed methods to support inter component communication

• Push the subscriptions to our permanent storage

In this video, we will finish up the display and styling for the subscriptions.

• Add the list to display the subscribed to shows

• Style them to make it look proper

• Place some helpful text messages for our users

In this video, we will look at the requirements needed to set up a webshop.

• Call ‘vueinitwebpack’

• Import the bulma framework and fontawesome in the main.js framework

• Add Firebase to your webapp

In this video, we are going to create an admin interface for our webshop.

• Prepare the data permissions in Firebase

• Protect our routes from unauthenticated access

• Add helper functions to our database library

In this video, we will add our products to the admin page and manage them.

• Define the features for our products

• Add some helper functions to the Database

• Create a new component in the admin folder 'Product.vue'. Finally, create a working product administration page

In this video, we are going to build up a shop display.

• Create a new file in the components base directory ‘Products.vue’

• Add a hero header displaying the shop’s logo

• Import the products component, and then a root route linked to the products component.

In this video, we are going to use VueX which is Vue’s implementation of the Flux architecture.

• Get to know the different parts of VueX

• After you run the code, refactor the products index and detail page

• Learn about the joy of deleting code and then apply it to your project

In this video, we are going to create a shopping cart.

• To handle the cart, add mutators, getters, and actions to the VueX store

• Add a cart widget to our shop

• Add a link to the checkout method, and a warning message if the customer wants to checkout without any products in the cart.

In this video, we will look at the last piece that will complete the project which is the checkout process.

• Create the last helper functions and the order object

• Prepare the permanent storage of new data and the handling of it

• Add a country selection dropdown component

In this video, we will implement the checkout component.

• Validate the customer information, payment and shipping options

• Get an overview and confirmation window before finalizing your order

• Add a thank you window.

In this video, we will look at the necessary elements for creating a real-time chat application.

• Get an overview of the basic setup and packages we're going to use

• Initialize the project by calling `vueinitwebpack`

• After creating a Firebase account, copy the settings for the helper library file

To make our chat application something pretty exclusive we can add a rigorous process of requiring a valid email address from our users.

• Set up some basic rules for the Firebase database

• Create the authentication component and integrate it with Firebase’s authentication process

• Set up a login and signup page for our users

Now that there’s an authentication in front of the chat it’s time to add the actual chat itself.

• Create the full-height page layout for the chat window

• Add some basic functionality for sending messages

• Listen to newly created messages and print them out in the message history

With the basic structure for chat rooms done we can expand that now to allow for multiple chat rooms.

• Set up more complex firebase rules to secure access to it

• Create a new component to act as a navigation menu for new rooms

• Include a form to create new forms and set the creating user as the room’s owner

The last missing puzzle piece: the user list and the ability to kick users from your rooms.

• Create the user list component as a menu

• Add joining users to the corresponding database structure

• If you are the owner of the current room, allow the process of forced removal of other users: kicking!