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
It is a best practice to test and create a continuous delivery pipeline when building an application. Using TypeScript and flow in JavaScript tends to reduce these errors, but a well-structured test guarantees the application will work as intended. A continuous delivery pipeline acts as a gatekeeper to ensure the application will not break when a new feature is introduced.

> The **Continuous Delivery Pipeline (CDP)** represents the workflows, activities, and automation needed to shepherd a new piece of functionality from ideation to an on-demand release of value to the end-user.

# Testing 
We can select and configure unit testing and end-to-end testing when creating a project using Vue CLI. 

```text
vue create whatsapp-clone

// select unit testing and end-to-end testing
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to 
proceed)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◉ Unit Testing
❯◉ E2E Testing
```

Once we have selected unit testing and end-to-end testing, Vue CLI will configure our application with unit testing and end-to-end testing.
> **Unit testing** is a software testing method by which individual units of source code—sets of one or more computer program modules together with associated control data, usage procedures, and operating procedures—are tested to determine whether they are fit for use. 
>
> **End-to-end testing** is a technique that tests the entire software product from beginning to end to ensure the application flow behaves as expected.


Select the unit testing of your choice:

```text
? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
  Jest      
```

Select the end-to-end testing of your choice:

```text
? Pick an E2E testing solution: (Use arrow keys)
> Cypress (Chrome only)
  Nightwatch (WebDriver-based)
  WebdriverIO (WebDriver/DevTools based) 
```       

The concept of testing using any of the products provided by default is similar. The main objective of testing is to design the tests so that they systematically find different types of errors without taking much time and effort so that less time is required to develop the software.


Learn about the concepts of testing in Vue.js application.

Getting Started

Introduction

Building WhatsApp Clone

Getting Started with AWS Amplify

Adding Functionality to The Application

Conclusion

Appendix

Testing Application and Continuous Delivery Pipeline

Introduction