1. Installation

In this very first tutorial, we are going to give you a brief introduction of what we are going to create and do the installation…

2. Setup Vue JS

In the previous chapter, we did the installation of our project and Node JS server. In this chapter, will setup Vue JS single-page application. Video…

3. Routing

In the previous chapter, we set up our Vue JS app. In this chapter, we are going to set the routing of our application. Routing…

4. Hello World

In this chapter, we will do the “Hello world” of our project. By “Hello world” we mean the basic setup of the front-end of the…

5. Registration

In this chapter, we will add the register feature to our app. First, we will be creating an API that will receive the values from…

6. Login

In this chapter, we will do the login part. First, we will create a login component same as we did for registration. So, create a…

7. Get Authenticated User’s Data

To get authenticated user’s data, we will be sending the stored access token from local storage to the API using headers. So how can we…

8. Logout

In the previous chapter, we displayed a logout button on the top navbar. But it was not functional. In this chapter, we are going to…

9. Add Contacts

In this chapter, we will add, view, and delete contacts. You can add any user to your contact by entering their email address. Once that…

10. View All Contacts

In this chapter, we will learn how to fetch all contacts from Mongo DB using Node JS and view them in the Vue JS app.…

11. Delete Contact

In the previous chapter, we displayed all the contacts of the logged-in user. The next thing we need to do is to allow users to…

12. Chat

In this chapter, we will be creating a real-time chat module. Creating a Chat Page First, create a link to the chat page. Open your…

13. Realtime Chat using Socket IO

We raise this concern in the previous chapter, that you need to refresh the page to see new chat messages. In this chapter, we will…

14. Load More Button – Fetch Previous Messages

Right now, you have noticed that you are only able to view the last 30 messages. This is because, in the twelfth chapter, we are…

15. Deploy Node JS, Mongo DB, and Vue JS

In this article, we will deploy our Node JS API on Heroku, database on Mongo DB, and Vue JS app on our own hosting. It…

Please disable your adblocker or whitelist this site!