Become an AWS pro by building a WhatsApp clone with Vue.js and AWS Amplify. Developed by AWS Solution Certified Architects. Get hands-on with no setup, no cleanup, no hassle.

edu.tar.gz

access_key_id

secret_access_key

region

amplify_app_id

Routing and State Management

Tailwindcss Components

WhatsAppClone

WhatsAppClone-copy

Vue.js is a popular JavaScript framework for front-end development. It is lightweight, has a dynamic ecosystem, and is expected to grow further as more developers adopt it. This course uses a hands-on project—a WhatsApp clone—to cover important concepts of front-end development using Vue.js. The project also uses AWS Amplify to manage and configure various AWS products to develop the application’s backend and to deploy the final product.

The course starts by introducing us to core Vue.js concepts like lifecycle hooks, routing, and state management. It then gives us a step-by-step guide to create a WhatsApp GUI. You’ll integrate the application with AWS Amplify before adding the WhatsApp functionality to the project.

By the end of the course, you’ll have a better understanding of the Vue.js framework. You’ll also get hands-on experience using AWS Amplify to manage various AWS products and services, including AWS Cognito, AWS S3, and AWS DynamoDB, to develop and deploy a Vue.js web application.

Building a WhatsApp Clone with Vue.js and AWS Amplify

# Introduction

In this lesson, we are going to structure our chat application. We will be incrementally adding features to it to have a working clone of WhatsApp by the end of the course. Please note that there are several ways you can structure your application. Make sure you do not put all content and functions into one component but instead break it into reusable building blocks. 



# Vue components

Throughout this section, we are going to create several components. When we are structuring your application, we will need to understand its components. The general principle is that we do not want to have everything in one Vue.js file. We would like to decouple our components to be sure we are building a scalable application. Let’s assume that we’re working on the profile page. It will have the following information:

1. General user information
2. Payment information
3. Profile picture

We can take advantage of what is depicted in the following diagram.

Learn how to structure a Vue.js application in a way that decouples the components and enables reusability.

Getting Started

Introduction

Building WhatsApp Clone

Getting Started with AWS Amplify

Adding Functionality to The Application

Conclusion

Appendix

Structuring the Vue.js Application